双向数据绑定原理

77 阅读1分钟

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

实现过程 因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。

image.png

屏幕截图 2023-02-21 114056.png

屏幕截图 2023-02-21 114355.png

image.png

在get 中这样写会报错 image.png

在get访问时需将属性带上

image.png

栈溢出

image.png

set赋值会冲突 在外部设置一个变量

image.png

image.png