「这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战」
一、 vue2和vue3双向数据绑定原理发生了改变
1. Vue2: object.defineProperty()
vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的,通过object.defineProperty()
来劫持对象属性的getter
和setter
操作,在数据变动时发布消息给订阅者,触发响应的监听回调。
object.defineProperty(obj, name,{
get:function resultGetter() {
},
set:function resultSetter() {
}
})
observer
:数据监听器,监听数据对象进行遍历,包括子属性对象的属性都加上getter
和setter
。compile
:解析模板指令,将模板中的遍历替换成数据,然后初始化渲染页面视图,并将每个指令对应节点绑定更新函数,添加监听数据的订阅者,一旦数据又变化,收到通知,更新视图。watcher
:订阅者是observer
和compile
之间的通信桥梁,在自身实例化时往消息订阅器dep里添加自己,自身必须有个updata()
方法,待属性变动dep.notice()
通知时,能调用自身的updata()
方法,并触发compiler
中绑定的回调。depend
: 消息订阅器,当有多个订阅者的时候,需要有一个统一维护者。depend
用来收集订阅者,内部维护了一个数组。
2. Vue3: Proxy
vue3
中使用了ES6
的Proxy
API对数据代理。
相比vue2.x
,使用proxy
的优势如下:
defineProperty
只能监听某个属性,不能对全对象监听- 可以省去
for in
,闭包等内容来提升效率(直接绑定整个对象即可) - 可以监听数组,不用再去单独的对数组做特异性操作
vue3.x
可以检测到数组内部数据的变化。
二、vue2和vue3定义数据变量和方法的改变
-
vue2
:定义数据变量是data(){}
,创建的方法要在methods:{}
中。 -
vue3
:直接在setup(){}
中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得return
。
三、vue2和vue3生命周期钩子函数的不同
vue2
中的生命周期
beforeCreate
组件创建之前created
组件创建之后beforeMount
组价挂载到页面之前执行mounted
组件挂载到页面之后执行beforeUpdate
组件更新之前updated
组件更新之后
vue3
中的生命周期
setup
开始创建组件onBeforeMount
组价挂载到页面之前执行onMounted
组件挂载到页面之后执行onBeforeUpdate
组件更新之前onUpdated
组件更新之后
而且Vue3.x
生命周期在调用前需要先进行引入。