vue3 reactive响应式依赖收集派发更新原理解析
目录
proxy
vue3的响应式实现依旧是依赖收集与派发更新，本节乃至后面涉及的代码都是经过简化，文章目的是讲解原理，直接贴源码会很枯燥
vue3已经从Object.property更换成Proxy，Proxy相比于前者可以直接监听对象数组，对于深层次的对象和数组，会把触发对应getter，然后去递归进行依赖收集，并不是直接像vue2暴力那样递归，总体而言性能更好
- 对reactive传进来的对象进行Proxy进行劫持在内部进行依赖收集与通知更新操作
function reactive(raw) {
return new Proxy(raw, {
get(target, key) {
const res = Reflect.get(target, key);
//添加依赖
track(target, key as string);
return res;
},
set(target, key, value) {
const res = Reflect.set(target, key, value);
trigger(target, key);
return res;
},
});
}
采用Reflet对对象进行标准化操作，因为如果直接采用JS如果失败了，不会产生异常提示
这样在进行获取数据是后进行依赖收集，在更新数据后进行通知依赖更新
依赖收集
接下来便介绍依赖收集是个什么样子
const targetMap = new WeakMap();
function track(target, key) {
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
let dep = depsMap.get(key);
if (!dep) {
dep = new Set();
depsMap.set(key, dep);
}
dep.add(currentEffect);
}
首先是一个WeakMap-->然后用户通过target获取对应的内部Map-->然后通过key获取到Set集合，内部便是存储的一个个依赖。其实依赖收集的过程就是这样。
这里使用WeakMap原因是它是一个弱引用，不会影响垃圾回收机制回收。
currentEffect
那么currentEffect 到底是个什么东西呢？实际上是ReactiveEffect中正在运行的类
class ReactiveEffect {
private fn: Function;
constructor(_fn: Function) {
this.fn = _fn;
}
run() {
currentEffect = this;
this.fn();
}
}
let currentEffect: null | ReactiveEffect = null;
function effect(fn: Function) {
const reactiveEffect = new ReactiveEffect(fn);
reactiveEffect.run();
}
后续会详情讲解，目前可以就把他理解成一个依赖，用户使用了effect函数过后，里面的响应式数据发生变化后会重新执行传递进去的回调函数
vue2中收集的依赖对应watcher，vue3收集的依赖实际是effect，他们两者实现功能实际上是一样的。
派发更新
这里暂不考虑DOM问题，操作起来其实很简单就是通过被Proxy劫持的target与key找到对应的Set集合调用用户传递的fn函数进行依赖更新
function trigger(target, key) {
let depsMap = targetMap.get(target);
let dep = depsMap.get(key);
for (let effect of dep) {
effect.fn();
}
}
总结
依赖收集与更新流程非常简单，其实就是当用户访问数据Proxy监听到后进行依赖收集；怎么收集呢用户在使用effect函数时实际上currentEffect就有值，待到访问数据后就可以收集这个依赖；然而用户如果设置对应数据那么就会被Proxy监听到，然后通过key拿到对应依赖执行fn函数
下一节会详细介绍effect，这一节只是初步介绍effect是的作用，以及如何解决分支切换、嵌套栈、无限循环递归问题。
以上就是vue3 reactive响应式依赖收集派发更新原理解析的详细内容，更多关于vue3 reactive响应式的资料请关注其它相关文章！
原文地址：https://juejin.cn/post/7206909221806473271