请简述 Vue 响应式原理

一、入口 initState()

• 位置 src/core/instance/state.js
• 响应式从init开始、init调用initState()初始话状态，initState中调用initData(),将data的属性，注入到vue实例，调用observe()将其转换成添加get, set方法转换响应式对象

export function initState (vm: Component) {
  vm._watchers = []
  ...
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  } 
  ...
}

function initData (vm: Component) {
  let data = vm.$options.data
  ...
  // 响应式处理
  observe(data, true /* asRootData */)
}

二、observe(value)

• 位置 src/core/observer/index.js
• 判断如果不是对象，或者是虚拟节点， 直接返回
• 如果value含有__ob__属性， 且是Observe类型， 则已经做响应式处理过, 返回ob, 如果没有处理过， 则创建new Observer(value)

三、Observer

• 位置 src/core/observer/index.js
• 为value对象定义不可枚举的__ob__属性, 记录当前的observer对象
• 如果对象是数组，调用 observeArray(value)， 为数组中的每一个对象创建一个 observer 实例
• 如果对象不是数组，调用walk(value)，遍历对象中的每一个属性，调用defineReactive(obj, keys[i])，转换成 setter/getter

四、defineReactive

• 位置vue/src/core/observer/index.js
• 为每一个属性创建dep对象， 如果当前属性值是对象， 递归调用observe(), getter为每一个属性收集依赖， 如果属性值是对象， 也需要为对象的每一个属性创建属性依赖， 最终返回属性值， setter设置新值， 如果新值是对象， 则调用observe，然后派发更新（发送通知），调用dep.notify（）

五、收集依赖

六、Watcher