大白话理解Vue数据双向绑定原理

Vue的数据双向绑定原理就是采用 数据劫持结合发布者-订阅者模式来实现的,其原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

思路整理:通过obj.defineProperty()来对属性进行劫持,达到监听数据变动的目的
1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并同指订阅者
2.实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
3.实现一个Watcher,作为Observer(数据监听器)和Compile(指令解析器)的桥梁,能够订阅并接受到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。

猜你喜欢

转载自blog.csdn.net/weixin_45324044/article/details/107792442