描述 vue 的响应式原理

1. Observer :给对象的属性添加 getter 和 setter ,用于依赖收集和派发更新
2. Dep :用于收集当前响应式对象的依赖关系,每个响应式对象都有 dep 实例,dep.subs = watcher[],当数据发生变更的时候,会通过dep.notify()通知各个 watcher
3. watcher:是一个中介,数据发生变化时通过 watcher 中转,通知组件 观察者对象,render watcher,computed watcher, user watcher

• 依赖收集

• 需要用到数据的地方,称为依赖
• 在getter中收集依赖,在setter中触发依赖

1. initState, 对 computed 属性初始化时,会触发computed watcher 依赖收集
2. initState, 对监听属性初始化的时候,触发user watcher 依赖收集
3. render,触发render watcher 依赖收集

• 派发更新 Object.defindeProperty

1. 组件中对响应式的数据进行了修改,会触发 setter 逻辑
2. dep.notify()
3. 遍历所有 subs,调用每一个 watcher 的 update 方法 总结: 当创建一个 vue 实例时, vue 会遍历 data 里的属性, Objeect.defineProperty 为属性添加 getter 和 setter 对数据的读取进行劫持 getter:依赖收集 setter:派发更新 每个组件的实例都有对应的 watcher 实例