深入浅出 Vue.js 学习笔记--Object的变化侦测

变化侦测

变化侦测是什么？简单来理解就是当数据发生变化时，要能侦测到并发出通知。

中等粒度

从Vue.js2.0开始，引入了虚拟DOM，将粒度调整为中等粒度，监听的状态不再是一个具体的DOM节点，而是一个组件。当组件状态发生变化后，其组件内部再使用虚拟DOM进行对比（patching算法）。这样做就可以降低依赖数量，从而降低依赖追踪所消耗的内存。

vue的数据双向绑定

vue 的数据双向绑定是基于Object.defineProperty的getter、setter方法与发布者订阅者模式实现的。而数据双向绑定流程的主要核心概念有：

1. Observer
把一个object中的所有数据（包括子数据）都转换成响应式的，可以监听到object中的所有数据。其实现的原理就是Object.defineProperty。

github源码地址：vue/src/core/observer/index.js

2. Dep
用于收集依赖、删除依赖和向依赖发送消息等。

github源码地址：vue/src/core/observer/dep.js

3. Watcher
就是所谓的依赖。只有Watcher触发的getter才会收集依赖，当数据发送变化时，就会循环列表，把所有的Watcher（一个组件中的所有依赖，和中等粒度相对应）都通知一遍。

github源码地址：vue/src/core/observer/watcher.js

核心概念之间的联系

首先通过Observer将object转化为getter/setter的响应式对象
当外界通过Watcher读取数据时，触发getter将Watcher添加到Dep中
数据发生变化时，触发setter，从而向Dep中的依赖（Watcher）发送通知
Watcher接到通知后向外界发送通知，渲染视图或者调用某个回调函数

存在问题

object数据的变化是通过getter/setter来追踪的，所以当给object添加属性或者删除属性时是无法侦测这个变化的，也不会向依赖发送通知。而为了解决这个问题，Vue.js提供了两个API——vm.$set和vm.$delete