vue-principle:vue双向数据绑定原理,简单实现。一种Reactive Programming

时间:2021-05-15 18:27:00
【文件属性】:
文件名称:vue-principle:vue双向数据绑定原理,简单实现。一种Reactive Programming
文件大小:15KB
文件格式:ZIP
更新时间:2021-05-15 18:27:00
JavaScript vue-principle vue双向数据绑定原理,简单实现。 实现流程: 首先通过一个Observer(监听器或者劫持器)去劫持data对象中的所有属性,方法就是使用Object.defineProperty()中的getter/setter,在属性set的时候通知Dependency(订阅器/容器)发布变化; 实现一个Watcher(订阅者),这个Watcher就是说我收到数据变化的通知后,应该去执行什么操作(重新填充列表,填充值等等,即更新视图),一个data.message数据可能对应多个使用场景,比如v-model="message"、v-text="message"、{{message}}等等,所以Watcher不止一个; 上面说到Watcher不止一个,所以我们可以实现一个容器Dependency,里面存放data.message对应的所有Watcher,这样当Observe
【文件预览】:
vue-principle-master
----.gitignore(161B)
----README.md(2KB)
----js()
--------main.js(296B)
--------dependency.js(244B)
--------observer.js(916B)
--------watcher.js(830B)
--------complier.js(3KB)
----two-ways-binding.png(9KB)
----index.html(1KB)

网友评论