Vue2的双向绑定真的就是观察者模式吗？

导语

建议先看看往期的推文对vue响应式有一定理解后再阅读本文。

Vue的双向绑定数据劫持

响应式与观察者模式特别是附录观察者模式与发布订阅模式

关于Vue2深入响应式原理作者原话为

深入响应式原理Vue 最独特的特性之一是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时视图会进行更新。

作者并未明确表明vue2的响应式原理是通过数据劫持根据观察者模式or发布订阅模式进行设计

分析

Vue 数据双向绑定主要是指数据变化更新视图视图变化更新数据。其中View变化更新Data可以通过事件监听的方式来实现所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View。

简述
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项Vue 将遍历此对象所有的 property并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
这些 getter/setter 对用户来说是不可见的但是在内部它们让 Vue 能够追踪依赖在 property 被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时会通知 watcher从而使它关联的组件重新渲染。

深入理解

监听器 Observer对数据对象进行遍历包括子属性对象的属性利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话给这个对象的某个值赋值就会触发 setter那么就能监听到了数据变化。

解析器 Compile解析 Vue 模板指令将模板中的变量都替换成数据然后初始化渲染页面视图并将每个指令对应的节点绑定更新函数添加监听数据的订阅者一旦数据有变动收到通知调用更新函数进行数据更新。

订阅者 WatcherWatcher 订阅者是 Observer 和 Compile 之间通信的桥梁 主要的任务是订阅 Observer 中的属性值变化的消息当收到属性值变化的消息时触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象它会在组件渲染的过程中把属性记录为依赖之后当依赖项的 setter 被调用时会通知 watcher 重新计算从而致使它关联的组件得以更新——这是一个典型的观察者模式只看watcher-Compile

订阅器 Dep订阅器采用 发布-订阅 设计模式用来收集订阅者 Watcher对监听器 Observer 和 订阅者 Watcher 进行统一管理。Observer-dep-Watcher

结论

vue双向绑定原理是一系列发布-订阅者设计模式组合更为准确。