vue2和vue3的区别

168 阅读1分钟

一、vue2和vue3双向数据绑定原理发生了变化

vue2的双向数据绑定利用的是ES5的Object.dinefineProperty()对数据进行劫持,结合发布订阅模式的方式来实现的
vue3使用了ES6的proxy对数据代理
相比Object.defineProperty() Proxy的优势如下:
前者只能监听某个属性,后者可以监听引用数据类型

二、vue2和vue3定义数据变量和方法的改变

vue2:定义变量在data()中,定义方法在methods中
vue3:定义变量和方法均在setup中

三、vue2和vue3生命周期钩子函数的不同

vue2的生命周期

beforeCreate:组件创建之前 //el data都是undefined
created:组件创建之后 //el:undefined beforeMount:组件挂载到页面之前 // el:没有编译的el {{name}} mounted:组件挂载到页面之后 //el:编译后的el beforeUpdate:组件更新之前 updated:组件更新之后

vue3的生命周期

setup:开始创建组件
onBeforeMount:组件挂载到页面之后
onMounted:组件挂载到页面之后
onBeforeUpdate:组件更新之前
onUpdated:组件更新之后

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

\