您好,登录后才能下订单哦!
这篇文章主要介绍“vue3 reactive响应式依赖收集派发更新原理是什么”,在日常操作中,相信很多人在vue3 reactive响应式依赖收集派发更新原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3 reactive响应式依赖收集派发更新原理是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
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
到底是个什么东西呢?实际上是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响应式依赖收集派发更新原理是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。