Vue2.x的双向绑定原理

数据变化更新视图可以使用 Object.definProperty() 的 set 方法可以检测数据变化，当数据改变就会触发这个函数，然后更新视图。

实现过程

我们知道了如何实现双向绑定了，首先要对数据进行劫持监听，所以我们需要设置一个 Observer 函数，用来监听所有属性的变化。

如果属性发生了变化，那就要告诉订阅者 watcher 看是否需要更新数据，如果订阅者有多个，则需要一个 Dep 来收集这些订阅者，然后在监听器 observer 和 watcher 之间进行统一管理。

还需要一个指令解析器 compile，对需要监听的节点和属性进行扫描和解析。

因此，流程大概是这样的：

1.  实现一个监听器 Observer，用来劫持并监听所有属性，如果发生变动，则通知订阅者。
2.  实现一个订阅者 Watcher，当接到属性变化的通知时，执行对应的函数，然后更新视图，使用 Dep 来收集这些 Watcher。
3.  实现一个解析器 Compile，用于扫描和解析的节点的相关指令，并根据初始化模板以及初始化相应的订阅器。路分析中，需要有一个可以容纳订阅者消息订阅器 Dep，用于收集订阅者，在属性发生变化时执行对应的更新函数。

   从代码上看，将订阅器 Dep 添加在 getter 里，是为了让 Watcher 初始化时触发，，因此，需要判断是否需要订阅者。

   在 setter 中，如果有数据发生变化，则通知所有的订阅者，然后订阅者就会更新对应的函数。

   到此为止，一个比较完整的 Observer 就完成了，接下来开始设计 Watcher.

   实现 Watcher

   订阅者 Watcher 需要在初始化的时候将自己添加到订阅器 Dep 中，我们已经知道监听器 Observer 是在 get 时执行的 Watcher 操作，所以只需要在 Watcher 初始化的时候触发对应的 get 函数去添加对应的订阅者操作即可。

   那给如何触发 get 呢？因为我们已经设置了 Object.defineProperty()，所以只需要获取对应的属性值就可以触发了。

   我们只需要在订阅者 Watcher 初始化的时候，在 Dep.target 上缓存下订阅者，添加成功之后在将其去掉就可以了。
   

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!