响应式流程

90 阅读1分钟

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个可以改变原数组的方法。

参考资料

Vue响应式实现原理 - 掘金 (juejin.cn)