大前端【3-2】Vue响应式原理简述

数据响应式是指，当数据发生变化自动更新视图，不需要手动操作dom，

第一步、入口，initState（）

vm状态的初始化，整个响应式是从init方法中开始的，在init方法中，调用initState方法初始化状态，在initState方法中调用initData（），将data属性注入到vue实例上，并且调用observe（）将其转化为响应式对象，observe是响应式的入口

第二步、observe（value）

位于src/core/observer/index.js，首先判断value是否是对象，如果不是对象直接返回，判断value对象是否有

__ob__,如果有证明value已经做过响应化处理，是响应式数据，则直接返回，如果没有，则在第三步创建observer对象，并将其返回。

第三步、Observe()

位于src/core/observer/index.js,给value对象定义不可枚举的__ob__属性，记录当前的observer对象，进行数组的响应化处理，设置数组中的方法push、pop、sort等，这些方法会改变原数组，所以当这些方法被调用的时候，会发送通知，找到observe对象中的dep，调用dep.notify()方法，然后调用数组中的每一个成员，对其进行响应化处理，如果成员是对象，也会将转化为响应式对象，如果value是对象的话，会调用walk()，遍历对象中的每一个成员，调用defineReactive()

第四步、defineReactive

src/core/observer/index.js,为每一个属性创建dep对象，如果当前属性是对象，递归调用observe().

getter:为每一个属性收集依赖，如果当前属性是对象，也为对象的每一个属性收集依赖，最终返回属性值。

setter:保存新值，如果新值是对象，则调用observe,派发更新（发送通知），调用dep.notify()

第五步、依赖收集

在watcher对象的get方法中调用pushTarget，会把当前的watcher记录Dep.target属性，访问的data成员的时候收集依赖，访问值的时候会调用defineReactive的getter中收集依赖，把属性对应的watcher对象添加到dep的subs数组中，如果属性是对象，则给childOb收集依赖，目的是子对象添加和删除成员时发送通知。

第六步、Watcher

当数据发生变化时，会调用dep.notify()，调用watcher对象的update()方法，在update方法中会调用queueWatcher()，方法中会判断watcher是否被处理，如果没有，则将其添加到queue队列中，并调用flushSchedulerQueue()刷新任务队列，在flushSchedulerQueue中，会触发beforeUpdate钩子函数，然后调用watcher.run（），然后清空上一次的依赖，触发actived钩子函数，触发update钩子函数。