vue响应式原理总结

一、vue响应式原理
1. 利用Object.defineproperty把data选项里面的属性注入到vue实列并转化成get/set，提供给外部使用。
2. 利用Object.defineproperty把$data里面的数据也转化成get/set,提供给内部实现响应式
----- 
  外包调用this.xxx 的时候会先触发this.xxx的getter,在this.xxx的getter中会return $data.xxx,
  会触发$data.xxx的getter    
-----
3. 利用观察者模式实现依赖收集和数据更新
二、Vue源码实现
1. 构造函数：实现data注入到Vue实列
2. Observer类：实现$data的get/set转化, get中收集依赖(dep.addSubs(Dep.target)),set中更新数据(dep.notify)
3. Dep类：收集依赖（watcher）,数据更新时触发notify通知对应的观察者（内部触发watcher的update方法)
4. watcher类：把watcher实列添加到Dep.target上,触发Observer类中的get收集依赖(let oldValue = data[key])
三、总结
1. 在哪里收集依赖：Observer类的get中
2. 在哪里触发依赖收集：Watcher类的构造函数中
3. 跟新视图的方法在哪里注册：compiler类里面注册，在watcher的update方法中调用
4. 所谓依赖就是观察者，收集依赖就是收集观察者。