Vue2与Vue3的区别
- 双向数据绑定原理不同；
- 是否支持碎片；
- API类型不同；
- 定义数据变量和方法不同；
- 生命周期钩子函数不同；
- 父子传参不同；
- 指令与插槽不同；
- main.js文件不同
由于Vue3使用了Proxy，数据变化的追踪更加精确和高效，不需要进行脏检查。这使得在大规模或复杂的数据操作时，Vue3的性能得到了明显的提升。
此外，Vue3还进行了一系列的针对性能的优化，比如静态模板编译等。这些优化使得Vue3的双向数据绑定更加快速和稳定。
1. 双向数据绑定原理
vue2： vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的
vue3： vue3中使用了ES6的Proxy API对数据代理。
proxy优势
相比vue2，使用proxy的优势如下：
- defineProperty只能监听某个属性，不能对全对象监听
- 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
- 可以监听数组，不用再去单独的对数组做特异性操作
- vue3.x可以检测到数组内部数据的变化。
Vue2和Vue3在双向数据绑定原理上有所不同。Vue2采用了Getter和Setter结合“脏检查”的方式来实现，相对较为复杂。而Vue3则采用了Proxy代理，能够更加精确和高效地追踪数据变化。Vue3的双向数据绑定方式在性能上有所提升，并且具备更多的灵活性和扩展性。
2、是否支持碎片
vue2：vue2不支持碎片。
vue3：vue3支持碎片（Fragments），就是说可以拥有多个根节点。
3、API类型不同
vue2：vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。
vue3：vue3使用合成型api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。
4、定义数据变量和方法不同
vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。
vue3： vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。
使用以下三个步骤来建立反应性数据：
- 从
vue引入reactive； - 使用
reactive()方法来声明数据为响应性数据； - 使用
setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。
5、生命周期钩子函数不同
vue2：
beforeCreate 组件创建之前
created 组件创建之后
beforeMount 组价挂载到页面之前执行
mounted 组件挂载到页面之后执行
beforeUpdate 组件更新之前
updated 组件更新之后
vue3：
setup 开始创建组件
onBeforeMount 组价挂载到页面之前执行
onMounted 组件挂载到页面之后执行
onBeforeUpdate 组件更新之前
onUpdated 组件更新之后
而且vue3生命周期在调用前需要先进行引入。
除了这些钩子函数外，vue3还增加了onRenderTracked和onRenderTriggered函数。
6、父子传参不同
vue2：父传子用props，子传父用事件 $Emit 。
vue3：vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup()方法中随意使用了。
7、指令与插槽不同
vue2：
使用slot可以直接使用slot；
v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用
vue3：
必须使用v-slot的形式；
vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；
移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；
移除v-on.native修饰符；
移除过滤器filter
8、main.js文件不同
vue2：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。
vue3：
需要使用结构的形式进行操作，引入的是工厂函数
app组件中可以没有根标签。
setup()函数特性
1、setup()函数接收两个参数：props、context(包含attrs、slots、emit)。
2、setup函数是处于生命周期beforeCreated和created俩个钩子函数之前。
3、执行setup时，组件实例尚未被创建（在setup()内部，this不会是该活跃实例得引用，即不指向vue实例，Vue为了避免我们错误得使用，直接将setup函数中得this修改成了undefined）。
4、与模板一起使用时，需要返回一个对象。
5、因为setup函数中，props是响应式得，当传入新的prop时，它将会被更新，所以不能使用es6解构，因为它会消除prop得响应性，如需解构prop，可以通过使用setup函数中得toRefs来完成此操作。
6、在setup()内使用响应式数据时，需要通过 .value 获取。
7、从setup() 中返回得对象上得property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加.value。
8、setup函数只能是同步的不能是异步的。
