Vue.js实现响应式系统的基本原理

Vue.js 是一款 MVVM 框架，数据模型仅仅是普通的 JavaScript 对象，但是对这些对象进行操作时，却能影响对应视图，它的核心实现就是「响应式系统」。尽管我们在使用 Vue.js 进行开发时不会直接修改「响应式系统」，但是理解它的实现有助于避开一些常见的「坑」，也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。

Object.defineProperty

首先我们来介绍一下 Object.defineProperty，Vue.js就是基于它实现「响应式系统」的。Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

实现 observer（可观察的）

知道了 Object.defineProperty 以后，我们来用它使对象变成可观察的。在生成vue实例时，为对传入的data进行遍历，使用Object.defineProperty把这些属性转为getter/setter。每个vue实例都有一个watcher实例，它会在实例渲染时记录这些属性，并在setter触发时重新渲染。为了更加直观的了解，下面是组件渲染时更新data的过程图。在data进行改变时会调用内部的settter方法，在data进行获取时，会调用内部的getter方法，如果一个处的data被改变了，那么对象被Watcher发现后，就会渲染data，这样就实现了某一处的数据改变，其他处调用此数据也相应发生改变。

说的更加直白一点就是，Vue()在 init 的时候通过 Object.defineProperty 进行了绑定，它使得当被设置的对象被读取的时候会执行 getter 函数，而在当被赋值的时候会执行 setter 函数。当 render function 被渲染的时候，因为会读取所需对象的值，所以会触发 getter 函数进行「依赖收集」，「依赖收集」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。在修改对象的值的时候，会触发对应的 setter， setter 通知之前「依赖收集」得到的 Dep 中的每一个 Watcher，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来更新视图，这就是Vue.js实现响应式系统的基本原理。