Vue2和Vue3的区别

Vue2和Vue3的区别

1.生命周期

Vue2使用选项类型的API，Vue3是合成型API。在Vue2中，可以在组件中调用组件的生命周期钩子函数，现在Vue3的合成API里面的setup()方法基本上包含了所有的东西，生命周期钩子就是其中之一。

但是Vue3中，生命周期钩子函数不是全局可以调用的，需要另外从Vue中引入，生命周期的挂载钩子叫onMounted,引入之后，我们就可以在setup()方法里面使用过onMounted挂载的钩子。

2.diff算法

Vue2和Vue3在 diff 算法方面的差异主要体现在：在处理完可复用节点后对剩余节点的处理方式。

Vue2是通过创建一个存放key和对应虚拟DOM节点的映射列表 {key， oldVnode}，然后遍历新节点列表的剩余节点，根据新的虚拟的DOM节点的key 查看它是否可以在表中找到可复用的节点的当时来处理剩余节点，并把这个可复用节点移动到正确的位置。

而Vue3则是创建一个映射关系数组，这个映射关系数组存放了新节点数组中的剩余节点在旧节点数组上的映射关系。建立完这个数组随即也就知道哪些节点是客服用的，然后通过这个数组计算最长递增子序列，这个序列的节点位置不懂，然后将新节点数组中的剩余节点移动到正确的位置。

3.数据响应式原理

Vue2的数据响应式原理是通过Object.defineProperty（）对数据进行劫持并结合发布订阅者模式的方式来实现的。

Vue3中使用ES6中的Proxy API对数据代理，通过reactive（）函数给每个对象都包一层Proxy，通过监听属性的变化，从而实现对数据的监控。

4. 组件通信

在Vue2 中父组件像子组件传值使用props，子组件像父组件传值使用emit。兄弟组件传值可以传到父组件，再传给子组件。爷孙组件传值使用provide 、inject，也可以使用Vuex状态管理进行组件之间的通信。

在Vue3中，由于Vue3将Vue2的选项式变为组合式，使用起来有一定的差别，但是差别不大。父传子：父组件使用ref或reactive将数据变为响应式数据，子组件使用props接收。子传父组件：父组件中定义方法接收子组件传递过来的数据，给子组件绑定自定义事件，触发自定义事件，执行context.emit方法，将值传递给父组件。爷孙组件传值和Vue2中一样也可以使用Provide\inject，但也可以使用ref或reactive将数据变为响应式数据。