vue3
- 完整流程
各个函数作用
effectstack
作用
把当前的 activeEffect 存储到 target->key->dep,然后添加一个 effect -> [dep] 的反向映射。
为什么要设计成一个栈 []
解决嵌套 effect 调用会导致原来的effect丢失。
deps
- 作用 存储effect
- weakmap depsmap[obj->map] deps [key ->set] -> dep [effect]
reactive
- Proxy
track
收集依赖
trigger
触发依赖
vue2
- 流程
Observer类
将对象变成响应式,getter中收集依赖,setter中触发依赖
Dep类
存储依赖
Wathcer类
观察者,数据变化时由Dep通知Watcher,再由Watcher通知其他
对于数组
用拦截器拦截的数组原型,重写了数组的7个可以改变原数组的方法。