Vue2响应式原理

Vue2响应式原理

Vue 2.0的响应式主要用到了Object.defineProperty实现对数据的监听

{
  value: undefined, // 属性的值
  get: undefined,   // 获取属性值时触发的方法
  set: undefined,   // 设置属性值时触发的方法
  writable: false,  // 属性值是否可修改，false不可改
  enumerable: false, // 属性是否可以用for...in 和 Object.keys()枚举
  configurable: false  // 该属性是否可以用delete删除，false不可删除，为false时也不能再修改该参数
}

dep.js 订阅器

订阅器采用发布-订阅设计模式，用来收集观察者Watcher，对Observer和Watcher进行统一管理。

watcher.js 观察者

Watcher是Observe和Compiler之间的通信桥梁，观察者需要被放入被观察者当中，当数据发生变化的时候，会执行相应观察者中的更新函数和对应Compile中的回调函数。

compiler.js 实现编译模板部分（解析器）

编译模板的主要功能是找出html中的 v- 开头的指令和文本中的 {{}} 然后将其替换成data里面相应的数据。
(1) 在MVVM.js中新建一个class Compiler，接收el和Vue实例本身（this）
(2) 判断基类Vue中el是否存在，存在的话 new 一个Compiler。

observer.js 数据劫持（监听器）

vue的数据劫持是通过Object的defineProperty方法劫持set和get实现的