扒一扒vue的数据追踪原理

大家都知道在angular或vue中，数据的更新会实时的反应到dom上，那么到底是什么原理呢，下面就vue探讨一下。

打开vue的官网，可以看到它关于vue如何追踪变化的原理。

把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。这是 ES5 特性，不能打补丁实现，这便是为什么 Vue.js 不支持 IE8 及更低版本。
用户看不到 getter/setters，但是在内部它们让 Vue.js 追踪依赖，在属性被访问和修改时通知变化。一个问题是在浏览器控制台打印数据对象时 getter/setter 的格式化不同，使用 vm.$log() 实例方法可以得到更友好的输出。
模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算 ，也就会导致它的关联指令更新 DOM。

如图，可能有同学看到这里会有点蒙，那么我们就打开源码一探究竟。

可以看到defineproperty中给属性getter,setter的设置，通过函数名可以猜测，一旦该属性被获取，便会添加依赖；同样的，一旦该属性被更改，便会发出通知。

如果对defineproperty有疑惑的同学，可以翻翻js高程中attribute这一章，或者看看我的这篇文章理解对象之attribute.