Vue响应式原理（双向数据绑定） #

简单版 #

Vue 在创建实例时，会遍历data选项的属性，利用object.defineProeprty 为属性添加setter和getter。getter用来依赖收集，setter用来派发更新，并且在内部追踪依赖，在属性被访问和修改时通知变化。

详解版 #

在创建Vue实例时，会遍历data的属性，并且对每个属性调用defineReactive函数。defineReactive函数的作用就是定义一个响应式对象，给对象添加getter和setter。在defineReactive函数中，会创建一个dep实例。Dep类就是利用Set去做存储，在depend的时候把Dep.target加入到deps里，在notify的时候遍历deps，触发每个watcher的update。

当执行一个watcher时，会先将该watcher中的渲染函数保存起来。然后将这个存储了渲染函数的watcher设置为Dep.target，然后执行渲染函数。

在执行渲染函数的过程中，读取到了value值，就会触发其getter，getter函数中执行dep.depend，将Dep.target加入到value的deps里。

当修改value的值时，就会触发其setter，setter函数会执行dep.notify，会遍历deps，执行每一个watcher的update