Vue的响应式原理

Vue版本：2.6.10

1. 入口_init()中：
   1. 调用initState()初始化Vue实例状态
   2. 调用initData()将data属性注入到Vue实例上
   3. 调用observe()将data属性转化为响应式对象，observe是响应式的入口
2. observe(value)：(src/core/observer/index.js)

if(value不是对象){
  return
}else if(value有__ob__属性){
  return//已是响应式对象，无需响应式处理
}else{
  为其创建observer对象
  return 创建的observer对象
}

3. Observe类(src/core/observer/index.js)
   1. 定义不可枚举的__ob__属性用来标记当前Observer对象
   2. 如果value是对象的话，会调用walk()，遍历对象中的每一个属性，对该属性调用defineReactive()
   3. 数组的响应式处理：
      1. 设置数组的push、pop、sort等方法。在调用这些方法时会发送通知，找到Observer对象中的dep，然后调用dep.notify()
      2. 遍历数组中的每一个成员，对其调用observe(value)
4. defineReactive()(src/core/observer/index.js)
   1. 为每一个属性创建dep，用来收集依赖
   2. 如果属性是对象，则递归地要用observe()，将该对象属性也响应式处理
   3. 定义getter()：收集依赖；若该属性为对象则为该对象的每个属性收集依赖，getter()最终返回该属性
   4. 定义setter()：保存新值，若新值为对象则调用observe()，最终调用dep.notify()派发通知更新
5. 收集依赖
   1. 调用watcher对象的get()，在其中调用pushTarget()，将当前watcher对象记录到Dep.target属性中
   2. 然后在访问data中的成员的时候收集依赖，就是在defineReactive()中定义的getter()中
   3. 将属性对应的watcher对象添加到dep的subs数组中
   4. 若属性是对象，则给childOb手机依赖，以便在子对象添加或删除成员时发送通知（数组中内容变化时用到了childOb）
6. Watcher类，当数据发生变化时：
   • dep.notify()时：调用Watcher对象的updata()，其中调用：
     • queueWatcher()判断watcher是否被处理：没有则添加到queue队列中，并调用在flushSchedulerQueue()：
       1. 触发beforeUpdate()钩子函数
       2. 调用watcher.run()：run()–>get()–>getter()–>updataComponent()（该过程是针对渲染watcher，该过程之后页面就可看到更新后的数据了）
       3. 清理工作：清空上一次的依赖；重置watcher的状态
       4. actived()钩子函数
       5. 触发update()钩子函数