2022-08-30Vue2 分钟读完 (大约 292 个字)

Vue2和Vue3的区别

Vue2和Vue3的区别。

Vue2和Vue3的数据绑定原理发生了变化

Vue2利用 Object.defineProperty() 完成的对数据的劫持，结合发布订阅来实现的双向数据绑定，但是只能监听某一个属性，不能对整个对象进行监听。

Vue3使用的是es6的 Proxy 的API来完成的双向数据绑定，可以监听整个对象。

Vue3支持多个根节点

Vue2只支持一个页面根节点，vue3支持多个。

Vue3可以使用composition API

composition API可以让我们通过代码功能的不同来分组API，可以使得代码更加直观。

Vue2数据定义在 data 里面，方法定义在 methods 里面。

Vue3可以首先引入 reactive ， setup 中使用reactive将变量包装为响应式变量，在setup的最后 return 这些响应式变量，最后 template 中就可以使用这些变量。

生命周期的变化

Vue2--------------Vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured