Vue的学习笔记--变化侦测(一)

Object的变化侦测

​ 变化侦测就是侦测数据的变化。当数据发生变化时，要能侦测到并且发出通知。

​ Object可以通过 Object.defineProperty 将属性转换成getter/setter 的形式来追踪变化。读取数据时会触发 getter ,修改数据时会触发 setter。

​ 我们需要在 getter 中收集有哪些依赖使用了数据，当 setter 被触发时，去通知 getter 中收集的依赖数据发生了变化。

​ 收集依赖需要为依赖找寻一个可以存储依赖的地方，为此我们创建了 Dep ，它用来收集依赖，删除依赖和向依赖发送消息等。

​ 所谓的依赖，其实就是 Watcher 。只有 Watcher 触发的 getter 才会收集依赖。哪个 Watcher 触发了getter,就把哪个 Watcher 收集到 Dep 中。当数据发生变化时，会循环依赖列表，把所有的 Watcher 都通知一遍。

​ Watcher 的原理是先把自己设置到全局唯一的指定位置（例如 window.target），然后读取数据。因为读取了数据，所以会触发这个数据的 getter。接着，在 getter 中就会从全局唯一的那个位置读取当前正在读取数据的 Watcher ，并把这个 Watcher 收集到 Dep 中去，通过这样的方式，Watcher 可以主动去订阅任意一个数据的变化。

​ 此外，我们创建了 Observer 类，它的作用是把一个 object 中的所有数据（包括子数据）都转换成响应式的，也就是它会侦测 object 中的所有数据（包括子数据）的变化。

​ 由于 ES6 之前 JavaScript 并没有提供元编程的能力，所以在对象上新增属性和删除属性都无法被追踪到。为了解决这个问题，Vue.js提供了两个 API ---- vm.$set与vm.$delete。

​ 下图给出了Data、Observer、Dep 和 Watcher 之间的关系。

​ Data 通过 Observer 转换成了 getter/setter 的形式来追踪变化。

​ 当外界通过 Watcher 读取数据时，会触发 getter 从而将 Watcher 添加到依赖中。

​ 当数据发生了变化时，会触发 setter ,从而向 Dep 中的依赖 （Watcher）发送通知。

​ Watcher接受到通知后，会向外界发送通知，变化通知到外界后可能会触发视图更新，也有可能触发用户的某个回调函数等。