Vue2和Vue3的主要区别
一、Vue响应式的底层实现不同
Vue2底层是通过es5的Object.defineProperty，使用Object.defineProperty()进行数据劫持，结合订阅发布的方式实现，有一定的局限性。
缺点：对数组更新的时候无法实现响应式，它内部有一个this.$set去实现
如果响应式定义的数据层级比较深（对象里面有对象，对象里面还有对象）它内部是 通过递归的形式去实现的
Vue3底层是通过es6的Porxy， 使用Proxy代理，使用ref或者reactive将数据转化为响应式数据，能够更好地支持动态添加属性和删除属性。
它解决了Vue2底层实现的缺点，对数组、层级比较深的对象处理都很优秀
缺点：浏览器兼容不是很好
二、生命周期有一定的区别
对于生命周期来说，Vue3整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子。
Vue2------------------------------Vue3
初始化阶段：
beforeCreate ------------------ setup()
created -------------------------- setup()
beforeMount -------------------- onBeforeMount
mounted -------------------------- onMounted
更新阶段：
beforeUpdate ------------------ onBeforeUpdate
updated ------------------------- onUpdated
activated ---------------------- onActivated
deactivated ------------------- onDeactivated
销毁阶段：
beforeDestroy ---------------- onBeforeUnmount
destroyed ---------------------- onUnmounted
三、支持碎片化，可以有多个根节点
Vue2 只支持一个根节点 ，在模板中如果使用多个根节点时会报错，
Vue3 支持多个根节点，也就是 fragment。即以下多根节点的写法是被允许的。
如下所示。
Vue3可以成功运行
Vue2报错
四，模板指令
在vue2或者vue3 中v-if和v-for可以同时存在，但是
在vue2中，v-for 优先级高于 v-if;
在vue3 中，v-if 优先级高于v-for;
五、语法API不同
Vue2：选项式API，面向对象编程
Vue3：选项式API/组合式API，面向函数编程；没有this，处处皆函数
1、Options API
Options API是Vue2中的默认编写方式，通过一个包含各种选项的对象来描述组件。这些选项包括data、methods、computed、watch、生命周期钩子等属性与方法，共同处理页面逻辑。Options API的优点是简单易懂，适合小型组件的编写。
如下：
export default {
data() {
return {}
},
methods:{}，
computed:{},
watch:{},
}可以看到Options代码编写方式，如果是组件状态，则写在data属性上，如果是方法，则写在methods属性上...
用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效
。但是，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解，同时也不方便后期的维护和修改。
2、Composition API
Composition API是Vue3中引入的新特性，通过一组函数来描述组件。这些函数包括setup、reactive、computed、watch等。Composition API的优点是更灵活、更可复用，适合大型组件的编写。数据和方法都定义在setup中。组件根据逻辑功能来组织的，一个功能所定义的所有API 会放在一起（实现更加的高内聚，低耦合）
Composition API中即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API
如下：
export default{
//关于msg实现及功能代码部分
setup(){
const msg = ref("hihihi")
const add = () =>{
msg.value = "xixixi"
}
//关于food的实现及功能代码部分
const food = ref("食物")
const chang = () =>{
food.value = "coffee"
}
//一定要记得return出去才可以用
return{
msg,add,food,chang,
}
}}其中在Vue3中经常使用的是setup语法糖。
如下：
3、对比
vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力
Composition API在逻辑组织方面的优势
相同功能的代码编写在一块，而不像options API那样，各个功能的代码混成一块
4、注意，Options API和Composition API并不是互斥的，可以在同一个组件中同时使用。但是，建议在大型组件中使用Composition API，以提高代码的可维护性和可读性。
如下：
/*
在Vue当中,可以同时使用选项式和组合式
但是我们只会选择其中一种
*/
const {ref} = Vue;
const app = Vue.createApp({
//组合式
setup(){
//定义一个变量
const msg = ref("你好!世界")
return{
msg
}},
//选项式
data(){
return{
msg:'hello world'
}}
})4、小结
-
在逻辑组织和逻辑复用方面，
Composition API是优于Options API -
因为
Composition API几乎是函数，会有更好的类型推断。 -
Composition API中见不到this的使用，减少了this指向不明的情况 -
如果是小型组件，可以继续使用
Options API，也是十分友好的