vue3源码学习（二）effect 源码学习

已于 2025-09-01 10:29:46 修改
阅读量513 收藏 9
点赞数 7
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： 学习 vue.js 前端
于 2025-09-01 10:28:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38369907/article/details/150610489

vue3.0源码学习（一） —— effect 源码学习

effect 源码学习回顾、复习。

effect 源码学习

vue3.x使用示例：

const state = reactive({
     name: '张三',
     nickName:'张三（书记）',
     age: 18,
     flag:false,
     n:{
         n:1
     }
 })
effect(() => {
   document.getElementById('app').innerHTML = `
        <h1>${state.flag ? state.nickName : state.name}</h1>
        <p>年龄: ${state.age}</p>
    `;
});

一、effect 函数

1、定义ReactiveEffect类

分析：effect 接收的是一个函数，且有调度函数scheduler，当初次加载和引用的数据发生改变会重新执行effect,且effect可以在同一个文件中多次使用。所以我们需要用类来抽象出来.。

class ReactiveEffect {
	public active = true //默认effect为失活状态
	constructor(public fn, public scheduler){} // 接收参数
	
	// 提供一个run方法
	run(){
		// 当失活状态则返回函数执行
		if(!this.active) return this.fn()
		
		return this.fn()
	}
}

2、实现 effect 函数

分析：effect第一个参数为一个函数，第二个参数为一个对象,effect可以多次使用，且effect可以返回一个对象单独调用effect内部的一些方法

export function effect (fn, options){
	const _effect = new ReactiveEffect(fn, options.scheduler)
	_effect .run() // 默认让响应式的effect执行一次
	const runner = _effect.run.bind(_effect)// 让用户可以手动调用effect
	runner.effect = _effect;  // 将effect挂载到runner上，用户可以通过runner拿到effect
	return runner;// 将effect返回，用户可以手动调用内部方法
}

二、依赖收集 track

1、依赖存储逻辑说明

分析: 在vue2.x和vue3的部分版本使用的方案是数组收集。在vue3高版本中使用了weakMap链路式收集依赖

//依赖收集数据结构示例：
/**
 *  targetMap {
 *      // target => object
 *      target:{ // new Map()
 *          // key => string
 *          key: [ // new Set
 *              activeEffect //effect
 *          ]
 *      }
 * }
 */
 为解决嵌套effect等情况加入parant和activeEffect

ReactiveEffect相关调整，以及定义全局activeEffect

export let activeEffect;
class ReactiveEffect {
    constructor(public fn, private scheduler){}
	public active = true// 是否激活
	public deps = [] // 用于存储依赖 需要知道effect依赖了哪些属性
	public parant = undefined; // 父级依赖 activeEffect
	
	run(){
		if(!this.active) return this.fn()
		// 示例：
        // let activeEffect = e2
        // effect(()=>{ //e1 e1.parent = null e1.deps = [name, address]
        //     name //e1
        //     effect(() => { e2 //e2.parent = e1
        //         age //e2
        //     })
        //     address // e1
        // })
        // 其他情况 意味着是激活状态
        try{ // 数据结构就是一个tree结构
            this.parant = activeEffect; // 将当前的effect作为父级依赖
            activeEffect = this; // 将当前的effect设置为activeEffect
            cleanpEffect(this); // 清空当前effect的依赖，避免重复收集
            return this.fn(); // 执行函数 这里做了依赖收集，收集当前的effect
        }finally{
            activeEffect = this.parant; // 恢复父级依赖
            this.parant = undefined; // 清空父级依赖
        }
	}
}

2、触发依赖收集

在响应式reactive将数据转换为响应式数据时触发依赖收集

get(target, key, receiver){
    // 因为触发了get,在外部传进来的key也是ReactiveFlags.IS_REACTIVE这样就达到了标识已经被代理过的逻辑
      if(key === ReactiveFlags.IS_REACTIVE) {
          return true; // 如果访问的是__v_isReactive属性，返回true
      }
      // return target[key]
      console.log('activeEffect', activeEffect, key);
      track(target, key) // 依赖收集，收集当前的effect

      const r = Reflect.get(target, key, receiver)
      if(isObject(r)){ // 只有用户取值才会二次代理
          return reactive(r)
      }

      // return Reflect.get(target, key, receiver) // 处理了this的指向问题
      // 通过Reflect来获取属性值， receiver是代理对象
      return r
  },

3、track 函数实现

按照既定数据结构收集依赖

/**
 *  targetMap {
 *      // target => object
 *      target:{ // new Map()
 *          // key => string
 *          key: [ // new Set
 *              activeEffect //effect
 *          ]
 *      }
 * }
 */

const targetMap = new WeakMap(); // 用WeakMap来存储依赖收集，key只能是对象
export function track(traget, key){
	if(!activeEffect) {
        // 说明没有在effect中执行所以不需要收集，或访问的不是响应式对象
        return;
    }
	
	let depsMap = targetMap.get(target); // 获取target对应的依赖收集
    if(!depsMap) {
        // 如果没有依赖收集，创建一个新的 这里的depsMap内存的是具体属性
        targetMap.set(target, depsMap = new Map());
    }
	
	let dep = depsMap.get(key) // 获取具体属性对应的依赖收集
	if(!dep){
		// 如果没有依赖收集，创建一个新的
		depsMap.set(key, dep = new Set())
	}
	
	// 将当前的effect添加到依赖收集
	if(!dep.has(activeEffect)){
		dep.add(activeEffect) // 添加当前的effect到依赖收集
		activeEffect.deps.push(activeEffect) // 将当前的依赖收集添加到activeEffect的deps中
	}
	 // 一个属性对应多个effect，一个effect对应多个属性； 多对多
}

三、触发更新 trigger

1、当set时触发trigger更新

在响应式reactive将数据转换为响应式数据时触发依赖收集

set(target, key, value, receiver){
        let oldValue = target[key] // 获取旧值

        // 通过Reflect来获取属性值， receiver是代理对象
        // set 方法的返回值是一个布尔值，表示是否设置成功
        let r = Reflect.set(target, key, value, receiver)

        if(oldValue !== value) {
            trigger(target, key, value, receiver) // 触发依赖
        }

        return r;
    }

2、track 函数实现

export function trigger(target, key, newVal, oldVal){
	 // weakMap { obj:key:set(effect)
    const depsMap = targetMap.get(target); // 获取target对应的依赖收集
	  if(!depsMap){ // 没有说明没有依赖，不需要更新
        return
    }
    const dep = depsMap.get(key); // 获取具体属性对应的依赖收集
	if(dep){
		let effects = [...dep]
		const effects = [...dep];
        effects.forEach(effect => {
            // 当我重新执行此effect时，将当前的effect放到全局上 activeEffect 上

            //这里的activeEffect是正在执行的effect
            // 因为activeEffect重新赋值是在finally中执行的,try中执行完成后才会执行finally
            // 所以当在effct中改变属性时，activeEffect还是正在执行的effect
            if(activeEffect != effect) {
                effect.run(); // 执行依赖收集中的effect
            }
        });
	}	
}

四、优化处理

1、cleanpEffect 避免重复收集

// 每次执行effect时，先清空当前effect的依赖的所有属性，避免重复收集
function cleanpEffect(effect) {
    // 每次执行effect时，先清空当前effect的依赖的所有属性，避免重复收集
    let { deps } = effect;
    // effect.deps.length = 0; // 只清空了数组，没有清空属性中的effect
    // 属性记录了effect effect {key: new Set([effect1, effect2])}
    for(let i = 0; i < deps.length; i++) {
        deps[i].delete(effect); // 将属性中的effect删除
    }
    effect.deps.length = 0; // 清空数组
}

// run 函数中加入清空逻辑
run () {
        if(!this.active) {
            return this.fn(); // 如果不激活，直接执行函数
        }
        // 其他情况 意味着是激活状态
        try{ // 数据结构就是一个tree结构
            this.parant = activeEffect; // 将当前的effect作为父级依赖
            activeEffect = this; // 将当前的effect设置为activeEffect
            cleanpEffect(this); // 清空当前effect的依赖，避免重复收集
            return this.fn(); // 执行函数 这里做了依赖收集，收集当前的effect
        }finally{
            activeEffect = this.parant; // 恢复父级依赖
            this.parant = undefined; // 清空父级依赖
        }
    }

2、加入失活stop

stop(){
    if(this.active){
        cleanpEffect(this); // 停止时，清空当前effect的依赖
        this.active = false;
    }
}

五、调度函数

  • trigger 中加入调度函数处理
export function trigger(target, key, newVal, oldVal){
    // weakMap { obj:key:set(effect)
    const depsMap = targetMap.get(target);

    if(!depsMap){
        return
    }
    const dep = depsMap.get(key); 
    if(dep) {
        const effects = [...dep];
        effects.forEach(effect => {
            if(activeEffect != effect) {
                if(effect.scheduler){
                    effect.scheduler()
                }else{
                    effect.run(); // 执行依赖收集中的effect
                }
            }
        });
    }
}

六、完整代码

import { reactive, ReactiveFlags } from "./reactive";
import { activeEffect, track, trigger } from './effect'
import { isObject } from "@vue/shared";

export const mutableHandlers = {
    get(target, key, receiver){
        // 因为触发了get,在外部传进来的key也是ReactiveFlags.IS_REACTIVE这样就达到了标识已经被代理过的逻辑
        if(key === ReactiveFlags.IS_REACTIVE) {
            return true; // 如果访问的是__v_isReactive属性，返回true
        }
        // return target[key]
        console.log('activeEffect', activeEffect, key);
        track(target, key) // 依赖收集，收集当前的effect

        const r = Reflect.get(target, key, receiver)
        if(isObject(r)){ // 只有用户取值才会二次代理
            return reactive(r)
        }

        // return Reflect.get(target, key, receiver) // 处理了this的指向问题
        // 通过Reflect来获取属性值， receiver是代理对象
        return r
    },
    set(target, key, value, receiver){
        // target[key] = value
        // return true
        let oldValue = target[key] // 获取旧值

        // 通过Reflect来获取属性值， receiver是代理对象
        // set 方法的返回值是一个布尔值，表示是否设置成功
        let r = Reflect.set(target, key, value, receiver)

        if(oldValue !== value) {
            trigger(target, key, value, receiver) // 触发依赖
        }

        return r;
    }
}


// 1.将属性和运行的effect关联起来
// 2.当属性变化时，重新执行effect, effect存在嵌套执行的情况
// 3.停止监听
// 4.外部调用
// 5.避免重复收集
// 6.scheduler调度函数


// 每次执行effect时，先清空当前effect的依赖的所有属性，避免重复收集
function cleanpEffect(effect) {
    // 每次执行effect时，先清空当前effect的依赖的所有属性，避免重复收集
    let { deps } = effect;
    // effect.deps.length = 0; // 只清空了数组，没有清空属性中的effect
    // 属性记录了effect effect {key: new Set([effect1, effect2])}
    for(let i = 0; i < deps.length; i++) {
        deps[i].delete(effect); // 将属性中的effect删除
    }
    effect.deps.length = 0; // 清空数组
}

/**
 * effect(（）=>{ //effect1
 *  name;
 *  effect(（）=>{//effect2
 *    age;
 *  })
 *  address
 * })
 *
 * vue2/vue3早期实现方案为栈 [effect1, effect2]
 * vue3 后续版本实现方案为打标记 parentEffectActive
 * 1.在执行effect时，先将当前的EffectActive存储起来
 * 2.执行完effect后，再将EffectActive恢复
 * 3.在effect中执行依赖收集时，使用EffectActive作为当前的依赖
 * 4.在属性变化时，使用EffectActive作为当前的依赖
 */

export let activeEffect;
class ReactiveEffect{
    public active = true; // 是否激活
    public deps = []; // 用于存储依赖 需要知道effect依赖了哪些属性
    public parant = undefined; // 父级依赖 activeEffect
    // public fn
    // constructor(fn) {
    //     this.fn = fn
    // }
    // 等价于上面
    constructor(public fn, private scheduler) {
        // 将当前对象的父级依赖赋值给 EffectActive
    }

    run () {
        if(!this.active) {
            return this.fn(); // 如果不激活，直接执行函数
        }

        // 示例：
        // let activeEffect = e2
        // effect(()=>{ //e1 e1.parent = null e1.deps = [name, address]
        //     name //e1
        //     effect(() => { e2 //e2.parent = e1
        //         age //e2
        //     })
        //     address // e1
        // })
        // 其他情况 意味着是激活状态
        try{ // 数据结构就是一个tree结构
            this.parant = activeEffect; // 将当前的effect作为父级依赖
            activeEffect = this; // 将当前的effect设置为activeEffect
            cleanpEffect(this); // 清空当前effect的依赖，避免重复收集
            console.log('try');
            return this.fn(); // 执行函数 这里做了依赖收集，收集当前的effect
        }finally{
            console.log('finally');
            activeEffect = this.parant; // 恢复父级依赖
            this.parant = undefined; // 清空父级依赖
        }
    }
    stop(){
        if(this.active){
            cleanpEffect(this); // 停止时，清空当前effect的依赖
            this.active = false;
        }
    }
}

// 依赖收集就是 将当前的effect变成全局的 稍后取值的时候就可以拿到这个全局的effect
export function effect (fn, options={}) {
    const _effect = new ReactiveEffect(fn, options.scheduler)

    _effect.run(); // 默认让响应式的effect执行一次
    const runner = _effect.run.bind(_effect); // 让用户可以手动调用effect
    runner.effect = _effect; // 将effect挂载到runner上，用户可以通过runner拿到effect
    return runner; // 将effect返回，用户可以手动调用stop方法
}


// 依赖收集数据结构
// 依赖收集的核心就是将当前的effect和属性关联起来
// let mapping = {
//     target:{
//         name:[activeEffect1, activeEffect2],
//     }
// }

const targetMap = new WeakMap(); // 用WeakMap来存储依赖收集，key只能是对象
export function track(target,  key){
    if(!activeEffect) {
        // 说明没有在effect中执行所以不需要收集，或访问的不是响应式对象
        return;
    }
    let depsMap = targetMap.get(target); // 获取target对应的依赖收集
    if(!depsMap) {
        // 如果没有依赖收集，创建一个新的 这里的depsMap内存的是具体属性
        targetMap.set(target, depsMap = new Map());
    }

    let dep = depsMap.get(key) // 获取具体属性对应的依赖收集
    if(!dep) {
        // 如果没有依赖收集，创建一个新的
        depsMap.set(key, dep = new Set());
    }

    // 将当前的effect添加到依赖收集
    let shouldTrack = dep.has(activeEffect)
    if(!shouldTrack){
        dep.add(activeEffect); // 添加当前的effect到依赖收集
        activeEffect.deps.push(dep); // 将当前的依赖收集添加到activeEffect的deps中
    }
    // 一个属性对应多个effect，一个effect对应多个属性； 多对多
}

// 触发更新
export function trigger(target, key, newVal, oldVal){
    // weakMap { obj:key:set(effect)
    const depsMap = targetMap.get(target); // 获取target对应的依赖收集

    if(!depsMap){
        return
    }
    const dep = depsMap.get(key); // 获取具体属性对应的依赖收集
    if(dep) {
        const effects = [...dep];
        effects.forEach(effect => {
            // 当我重新执行此effect时，将当前的effect放到全局上 activeEffect 上

            //这里的activeEffect是正在执行的effect
            // 因为activeEffect重新赋值是在finally中执行的,try中执行完成后才会执行finally
            // 所以当在effct中改变属性时，activeEffect还是正在执行的effect
            if(activeEffect != effect) {
                if(effect.scheduler){
                    effect.scheduler()
                }else{
                    effect.run(); // 执行依赖收集中的effect
                }
            }
        });
    }
}
Vue源码学习(二)
nanxing的博客
08-11 157
Vue源码学习（二） 实现一个 Mini Vue 渲染系统 渲染系统：h函数、mount函数 patch函数 function patch(oldVNode, newVNode) { if (oldVNode.tag !== newVNode.tag) { const el = oldVNode.el.parentElement; el.removeChild(oldVNode.el); mount(newVNode, el) } else { const el =
如何Vue 3查阅源码
weixin_40682342的博客
06-29 75
学习 Vue 3 源码是深入理解框架原理、提升前端技术能力的有效途径。
Vue3源码1-系统化学习步骤
Bruce__taotao的博客
04-29 1043
深入熟悉 Vue 3 源码及其设计思路，通常可以按照以下5 个系统化步骤响应式系统 → 组件挂载流程 → 编译器原理 → 生命周期和调度 → 源码调试 → 自主实现 mini-vue。
学习vue3源码 - reactive与effect
Zhyonyu的博客
02-07 1258
罪恶的一年过去了，发现我自己面试老是被各种问题难倒！思来想去发现！主要还是基础不牢！地动山摇！所以打算好好去学习一下vue3的源码，做一些整理笔记，如果有哪里不对还请各位大佬批评指正。
【Vue3源码学习】— CH2.6 effect.ts：详解
YSG的博客
03-29 1214
activeEffect是一个全局变量，用于存储当前正在执行的ReactiveEffect实例。当Vue的响应式系统执行一个副作用函数时，它会把这个副作用函数对应的ReactiveEffect实例设置为activeEffect，这样在副作用函数执行期间，任何响应式数据的访问都能通过activeEffect关联起来，实现依赖追踪。ReactiveEffect类封装副作用函数及其行为，代理副作用函数的执行来跟踪依赖，并在依赖数据变化时触发更新。
【Vue3源码学习】— CH2
2401_84412050的博客
05-01 222
Vue 3 的响应式系统利用现代 JavaScript 的特性，如 Proxy 和 Reflect，为开发者提供了一个强大且灵活的工具集，以简化响应式编程。Vue 3的响应式系统使用了诸如WeakMap和Map这样的原生数据结构来存储依赖关系，减少了内存的使用，并优化了垃圾回收。同时，通过避免不必要的副作用执行和精细的依赖追踪，提高了更新的效率。当响应式数据被修改时，Vue 通过trigger函数查找所有依赖于这个数据的副作用函数，并重新执行它们。这样，基于这些数据的视图或其他副作用就会被更新。
vue源码解析学习笔记
qq_40615442的博客
03-30 982
vue源码解析学习笔记
Vue3源码学习4-effect中为什么使用WeakMap，Set？
Bruce__taotao的博客
05-02 370
在mini vue - effect 实现中。
Vue3源码学习之路-实现computed
凉秋秋秋
09-05 693
Vue3源码学习之路-实现computed
【Vue3源码学习】响应式源码解析：reactive、effect、ref
ColdCoder的博客
03-01 2281
源码版本 Vue3.2.24 废话不多说，直接开始！！！ reactive响应式 源码地址：packages/reactivity/reactive.ts 先看一下在 Vue3 中定义的几个用来标记目标对象 target 的类型的ReactiveFlags，下面先是枚举的属性 export const enum ReactiveFlags { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive', IS_READONLY = '__v_isReado
Vue3源码 学习
qq_42544091的博客
10-11 3602
学习vue源码
解读vue3源码-响应式篇3 effect副作用函数
weixin_48363291的博客
08-26 2262
什么是副作用函数？在 Vue 3 中，副作用函数（Effect Function）通常指的是那些依赖于响应式数据并在数据变化时重新执行的函数。Vue 3 引入了 ref 和 reactive API 来创建响应式数据，以及 effect 函数来观察和处理这些数据的变化。当一个函数被标记为副作用函数时，它会被 Vue 的响应式系统跟踪。这意味着每当这个函数依赖的响应式数据发生变化时，Vue 会自动重新执行这个函数，从而触发 UI 的更新或其他相关操作。例如：// 定义一个副作用函数});
【vue3源码学习】初始化流程分析：渲染器与 createApp
sinat_33255495的博客
10-25 955
学习 vue3 源码，是不是一时不知道从哪里入手？不了解哪些有依赖关系，哪些能做什么事？今天我们就 vue 项目的初始化流程进行分析。
解读vue3源码-响应式篇2
weixin_48363291的博客
07-19 1773
保姆式逐行解读响应式源码
vector的学习和模拟
努力学习C、C++、Linux等！
08-30 629
vector是表示可变大小数组的序列容器。2、获取最后一个数据位置的reverse_iterator/const_reverse_iterator，获取第一个数据前一个位置的 reverse_iterator/const_reverse_iterator。实际就是迭代器底层对应指针所指向的空间被销毁了，而使用一块已经被释放的空间，造成的后果是程序崩溃(即如果继续使用已经失效的迭代器， 程序可能会崩溃)。假如如上有一个数组，使用3个指针来描述，数组的起始地址和有效数据的下一位置和有效空间的下一个位置。
系统性学习数据结构-第二讲-顺序表与链表
2401_87023016的博客
09-01 669
你所见过的最全面，最详细讲解数据结构知识点的文章，第二讲-顺序表与链表
机器视觉学习-day12-图像梯度处理及图像边缘检测
XZSSWJS的博客
08-30 378
初学小小白，个人笔记使用，仅供参考
rust语言 (1.88) egui (0.32.1) 学习笔记（逐行注释）（二十四）窗口颜色、透明度、居中显示
最新发布
咸甜适中
09-02 124
本文介绍了使用Rust的egui库创建透明可调色窗口的方法。第一部分展示了如何通过设置Color32::from_rgba_premultiplied()实现固定透明度和颜色的窗口效果。第二部分进阶实现，通过添加滑块控件动态调整窗口的RGB颜色分量和透明度(0-1范围)。关键代码包括创建透明视口、设置颜色值和使用滑块交互组件，实现了运行时可实时调节窗口外观的效果。
网络安全零基础入门：2025核心知识与系统学习路径分享
AUG2468的博客
08-26 839
网络安全是指对网络系统中的硬件、软件以及系统内的数据进行全面保护，使其不会因偶然失误或恶意攻击而遭受破坏、更改、泄露，保障系统能够连续、可靠、正常地运行，确保网络服务不中断。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白开水丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值