vue3响应式原理-effect

只爱喝白开水

已于 2022-04-06 09:54:03 修改

阅读量2.5k

点赞数 1

分类专栏： Vue 文章标签： vue 前端

于 2022-04-05 18:13:13 首次发布

本文链接：https://blog.youkuaiyun.com/gudeng007/article/details/123974062

版权

本文深入探讨Vue3的响应式原理，详细解析effect如何实现、依赖收集的机制、触发更新的流程、如何停止effect、调度执行的控制以及深度代理技术，总结了实现响应式的核心思想和关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

effect的基本实现

export let activeEffect = undefined;// 当前正在执行的effect

class ReactiveEffect {
   
    active = true;
    deps = []; // 收集effect中使用到的属性
    parent = undefined;
    constructor(public fn) {
    }
    run() {
   
        if (!this.active) {
    // 不是激活状态
            return this.fn();
        }
        try {
   
            this.parent = activeEffect; // 当前的effect就是他的父亲
            activeEffect = this; // 设置成正在激活的是当前effect
            return this.fn();
        } finally {
   
            activeEffect = this.parent; // 执行完毕后还原activeEffect
            this.parent = undefined;
        }

    }
}
export function effect(fn, options?) {
   
    const _effect = new ReactiveEffect(fn); // 创建响应式effect
    _effect.run(); // 让响应式effect默认执行
}

依赖收集

get(target, key, receiver) {
   
    if (key === ReactiveFlags.IS_REACTIVE) {
   
        return true;
    }
    const res = Reflect.get(target, key, receiver);
    track(target, 'get', key);  // 依赖收集
    return res;
}

const targetMap = new WeakMap(); // 记录依赖关系
export function track(target, type, key)

最低0.47元/天解锁文章