Vue3 和 Vue2 对比分析及示例代码解析（初级）

Vue3 和 Vue2 的主要区别在于 Vue3 引入了 Composition API，这是一种新的组织和复用代码的方式。而 Vue2 主要依赖于 Options API。

先来看一个 Vue2 的示例：

// Vue 2
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component has been mounted.')
  }
}

同样的功能在 Vue3 中可以这样实现：

// Vue 3
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    onMounted(() => {
      console.log('Component has been mounted.')
    })

    return {
      count,
      increment
    }
  }
}

从这两个例子中，我们可以看到以下几点不同：

1. Vue3 引入了 setup 函数，这是使用 Composition API 的入口。所有的响应式数据和方法都在 setup 函数中定义和返回。

2. Vue3 使用 ref 和 reactive 来创建响应式数据，而 Vue2 中则是在 data 函数中返回一个对象。

3. Vue3 中提供了一系列的生命周期钩子，如 onMounted、onUpdated 和 onUnmounted，这些钩子在 setup 函数内部使用。而在 Vue2 中，这些钩子是组件选项。

4. Vue3 的方法可以直接返回，而不需要像 Vue2 那样放在 methods 对象中。