对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(); }}
以上就是vue3 reactive响应式依赖收集派发更新原理是什么的详细内容。
