this.parentshouldTrack=lastShouldTrackthis.parent=undefined// 若设置了延迟停止,则执行stop,进行延迟清理if(this.deferStop){this.stop()}}}// 清除副作用stop() {// stopped while running itself - defer the cleanupif(activeEffect===this){this.deferStop=true}elseif(this.active){cleanupEffect...
trigger方法的实现思路也很简单,就是从前面的依赖缓存targetMap中,找到此时target的某个key对应的_effect依赖集合,让其中的所有_effect依次执行即可: // reactivity/src/effect.tsexportfunctiontrigger(target, key) {// 找到 target 的所有依赖letdepsMap = targetMap.get(target)if(!depsMap) {return}// 属性依...
}// 当前活跃的effectlet parent: ReactiveEffect | undefined = activeEffect let lastShouldTrack = shouldTrack// 如果当前活跃的effect就是这个effect本身,则直接返回while(parent) {if(parent ===this) {return} parent = parent.parent }// 依次活跃的effect形成链表,由parent属性连接try{this.parent = act...
functionreactive(target){returnnewProxy(target,{get(target,key,receiver){track(target,key);// 依赖收集returnReflect.get(target,key,receiver);},set(target,key,value,receiver){constresult=Reflect.set(target,key,value,receiver);trigger(target,key);// 依赖更新returnresult;}});} 1. 2. 3. 4. ...
effect是将传入的函数转化为reactiveEffect格式的函数 track主要功能是将reactiveEffect添加为target[key]的观察者 trigger主要功能是通知target[key]的观察者(将观察者队列函数一一取出来执行) effect(fn, options):ReactiveEffect 返回一个effect数据:reactiveEffect函数。
{effect:activeEffect,target,type,key}:undefinedtrackEffects(dep,eventInfo)} 这里我们已经成功将依赖收集了起来,接下来就是看当我们修改响应式数据时,vue是如何知晓并更新的 三、trigger() 派发更新 trigger是track收集的依赖对应的触发器,也就是负责根据映射关系,获取响应式函数,再派发通知triggerEffects进行更新...
在上一篇文章《响应式原理与 reactive》中由于篇幅限制笔者留下了两个小悬念 track 依赖收集处理器与 trigger 派发更新处理器没有细致讲解,而在本篇文章中笔者会带着大家一起来学习 Vue3 响应式系统中的依赖收集部分和副作用函数。 Vue 是怎样追踪变化的?
1. 创建响应式的 effect,并与原函数进行关联 2. 拦截 get 功能 createGetter 函数 3. 依赖收集 track 函数 4. 拦截 set 功能 createSetter 函数 5. 触发更新 trigger 函数 shared 工具方法抽离 简单记录一下 Vue3 和 Vue2 区别 Vue3 源码采用 monorepo 方式进行管理,将模块拆分到 package 目录中 ...
effect是将传入的函数转化为reactiveEffect格式的函数 track主要功能是将reactiveEffect添加为target[key]的观察者 trigger主要功能是通知target[key]的观察者(将观察者队列函数一一取出来执行) effect(fn, options):ReactiveEffect 返回一个effect数据:reactiveEffect函数。
在ref里最关键的还是trackRefValue和triggerRefValue,负责收集触发依赖。 如何收集依赖: function trackRefValue(ref) { // 判断是否需要收集依赖 // shouldTrack 全局变量,代表当前是否需要 track 收集依赖 // activeEffect 全局变量,代表当前的副作用对象 ReactiveEffect ...