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}}
}
从这两个例子中，我们可以看到以下几点不同：
-
Vue3 引入了 setup 函数，这是使用 Composition API 的入口。所有的响应式数据和方法都在 setup 函数中定义和返回。
-
Vue3 使用 ref 和 reactive 来创建响应式数据，而 Vue2 中则是在 data 函数中返回一个对象。
-
Vue3 中提供了一系列的生命周期钩子，如 onMounted、onUpdated 和 onUnmounted，这些钩子在 setup 函数内部使用。而在 Vue2 中，这些钩子是组件选项。
-
Vue3 的方法可以直接返回，而不需要像 Vue2 那样放在 methods 对象中。