vue的双向绑定原理_weixin_42178670的博客-爱代码爱编程
vue的双向绑定原理
vue2的双向绑定原理
一、原理
vue2采用数据劫持结合发布者-订阅者模式的方法,通过Object.defineProperty()来劫持各个属性的setter和getter,当数据发生变化时通知订阅者,触发相应的回调,渲染更新视图
二、具体步骤
1、对于需要observer的数据,通过递归遍历,给它的所有属性(包括子属性)添加上setter和getter,以便数据发生变更时触发setter
2、compile解析编译模板指令,将模板中的变量替换为数据,初始化渲染页面视图,并给模板指令对应的节点绑定更新函数,添加订阅者,一旦数据有变化,接到通知触发回调
3、watcher订阅者是observer和compile之间的通信桥梁,主要办以下几件事:
a、在自身实例化过程中向属性订阅器(dep)中添加自己
b、自身必须有update()函数
c、当属性值发生变化时,收到dep.notice()通知,调用update()方法,触发complie中绑定的更新函数
4、MVVM作为数据绑定入口,整合observer、compile和watcher的关系,observer监听自己的model数据变化,compile解析编译模板指令,watcher是observer和compile之间的通信桥梁,实现 当model数据变化时,视图更新,视图交互变化时,model数据变化的双向绑定的效果
vue3为什么使用proxy代替Object.defineProperty
因为Object.defineProperty有如下弊端:
1、无法监听到对象属性的添加和删除
2、数组的API方法也无法监听
3、需要对每个属性进行遍历监听,如果是嵌套对象,则需要深层监听,影响性能
而proxy是:
1、劫持整个对象返回一个新对象,只操作新对象达到响应式
2、可以监听数组变化
3、proxy具有13种拦截方法,而Object.defineProperty()是不具有的