Vue3源码学习 --- 响应式一

最新推荐文章于 2023-03-01 17:35:41 发布
最新推荐文章于 2023-03-01 17:35:41 发布
阅读量979 收藏
点赞数
分类专栏： Vue3 源码学习 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41361668/article/details/123976296
版权

响应式系统

响应式系统可以说 vue 的驱动器，当读取模板中的数据时触发 getter，此时收集渲染函数；模板中的数据被修改触发 setter，此时执行收集到的渲染函数。vue 响应式的实现的核心思想是数据劫持，在 vue2 中是通过 Object.defineProperty 实现，vue3 是通过 proxy 实现。这些都是一些基本知识点，对于响应式系统除了数据劫持外还做了什么。

副作用函数和简单的响应式系统

在说明响应式系统的功能时，有提到两个关键的名词：模板中的数据和渲染函数。其中渲染函数就是副作用函数，因为该函数有访问函数外部的变量。副作用函数执行导致外部变量的改变，直接或者间接的影响到使用该外部变量的其他函数。模板中的数据的读取或修改都会和副作用函数产生关系，下面通过代码来完成一个简单的响应式系统

const data = {
    str: 'hello world',
}
// 定义副作用函数 effect
function effect() {
    document.body.innerText = proxy.str;
}
let fn;
// 进行数据劫持
const proxy = new Proxy(data, {
    get(target, key) {
        fn = effect;
        return target[key]
    },
    set(target, key, newVal) {
        target[key] = newVal;
        fn();
        return true;
    }
})
effect();
setTimeout(()=>{
    proxy.str='111'
},1000)

虽然完成了一个简单的响应式系统，但是考虑以下几种情况，代码该如何修改增加功能呢

  • 情况一：如果副作用函数是一个匿名函数

    function effect() {
    document.body.innerText = proxy.str;
}
// 副作用函数是一个匿名函数
function fn(()=>{
    document.body.innerText = proxy.str;
})

  • 情况二：data 中有多个属性，每个属性都存在与之相对的副作用函数

    data ={
    key1:value1,
    key2:value2,
    key3:value3,
}
function effect1(){data.key1}
function effect2(){data.key2}
function effect3(){data.key3}

  • 情况三：data 中的同一个属性被多个副作用函数使用

    data ={
    key1:value1,
}
function effect1(){data.key1}
function effect2(){data.key1}
function effect3(){data.key1}

  • 情况四：data 中有多个属性，每个属性都被同一个副作用函数使用

    data ={
    key1:value1,
    key2:value2,
    key3:value3,
}
function effect1(){data.key1;data.key2;data.key3;}

  • 情况五：访问了 data 中不存在的属性

    data ={
    key1:value1,
}
function effect1(){data.key2}

  • 情况六：存在多个 data

    data1 ={
    key1:value1,
}
data2 ={
    key1:value2,
}
function effect1(){data1.key1}
function effect2(){data2.key1}

完善响应式系统

针对以上提到的问题，逐一完成要求的功能

副作用函数是一个匿名函数

对于情况一：副作用函数是匿名函数，可以封装一个 effect 函数，提供一个参数 fn 用来接收并注册副作用函数。同时创建一个全局变量用来保存副作用函数。

// 创建一个全局变量，用来保存被注册的副作用函数
export let activeEffect:()=>void;
// effect 函数用来注册副作用函数，而非副作用函数本身
export function effect<T>(fn:()=>T){
    activeEffect = fn;
    fn();
}

data 中有多个属性

上面说的情况二/三/四/五其实是实现方式都是一样的，需要做的是副作用函数和目标属性建立明确联系：用到同一个属性的所有的 effect 函数保存在同一个 Set 对象内。创建一个 Map 对象，保存对象属性和 set 对象的映射。

data ={
    key:value,
}
function effect(){data.key}
// 下面表示的是 key/effect 和 Set/Map 之间的关系
// Set 对象保存所有的 effect 函数
Set: effect
// Map 对象保存属性 key 和 Set 对象的映射
Map: key → Set

按照上方所述的原理，代码如下：

// 创建一个全局变量，用来保存被注册的副作用函数
let activeEffect;
// effect 函数用来注册副作用函数，而非副作用函数本身
function effect(fn) {
    activeEffect = fn;
    fn();
}

// 创建一个全局的 bucket 变量，用来保存属性和 Set 对象的映射关系
const bucket = new Map();
// get 拦截函数中调用 track 记录各属性对应的副作用函数
function track(target, key) {
    if (!activeEffect)
        return;
    let depsMap = bucket.get(key);
    !depsMap && bucket.set(key, (depsMap = new Set()));
    depsMap.add(activeEffect);
    // 记录完副作用函数后置空
    activeEffect = null;
}
function trigger(target, key) {
    let depsMap = bucket.get(key);
    depsMap && depsMap.forEach(cb => cb());
}
// 封装一个 reactive 函数，实现对对象的拦截
function reactive(obj) {
    return new Proxy(obj, {
        get(target, key) {
            track(target, key);
            return target[key];
        },
        set(target, key, newVal) {
            target[key] = newVal;
            trigger(target, key);
            return true;
        }
    });
}

测试代码：

<div id="person1">
    <h1 class="effect1"></h1>
    <h1 class="effect2"></h1>
    <h1 class="effect22"></h1>
    <h1 class="effect23"></h1>
    <h1 class="effect3"></h1>
    <h1 class="effect4"></h1>
</div>
<script>
    const person1 = reactive({
        name: 'tom',
        age: 11,
        sex: 'man'
    });
    const person2 = {
        name: 'mary',
        age: 10,
        sex: 'women'
    }

    effect(() => {
        document.querySelector('#person1 .effect1').innerText = person1.name;
    });
    effect(() => {
        document.querySelector('#person1 .effect2').innerText = person1.age;
    });
    effect(() => {
        document.querySelector('#person1 .effect22').innerText = person1.age + 100;
    });
    effect(() => {
        document.querySelector('#person1 .effect23').innerText = person1.age + 200;
    });
    effect(() => {
        document.querySelector('#person1 .effect3').innerText = person1.sex;
    });
    effect(() => {
        document.querySelector('#person1 .effect4').innerText = person1.a
    });
    setTimeout(() => {
        Object.assign(person1, person2);
    }, 2000);
    setTimeout(() => {
        person1.a = 'hello world';
    }, 3000);
</script>

存在多个 data

对于情况六存在多个 data 的情况，实现思想和上面类似。只需要新增一组 WeakMap 对象，表示 data 和 Map 的映射关系。

data1 ={
    key1:value1,
}
data2 ={
    key1:value2,
}
function effect1(){data1.key1}
function effect2(){data2.key1}
// 下面表示的是 key/effect 和 Set/Map 之间的关系
// Set 对象保存所有的 effect 函数
Set: effect
// Map 对象保存属性 key 和 Set 对象的映射
Map: key → Set
// WeakMap 对象保存 data 和 Map 对象的映射关系
WeakMap: data → Map

代码修改如下：

// 创建一个全局变量，用来保存被注册的副作用函数
let activeEffect;
// effect 函数用来注册副作用函数，而非副作用函数本身
function effect(fn) {
    activeEffect = fn;
    fn();
}
function setActiveEffectNull() {
    activeEffect = null;
}

// 创建一个全局的 bucket 变量，用来保存 data 和 Map 对象的映射关系
const bucket = new WeakMap();
// get 拦截函数中调用 track 记录各属性对应的副作用函数
function track(target, key) {
    if (!activeEffect)
        return;
    // 创建一个 depsMap 变量，用来保存属性和 Set 对象的映射关系
    let depsMap = bucket.get(target);
    // 如果 data 不存在，则新建一个以 data 为 key，value 为 Map 的映射
    !depsMap && bucket.set(target, (depsMap = new Map()));
    // 创建一个 dep 变量，用来保存所有的 effect 函数
    let deps = depsMap.get(key);
    !deps && depsMap.set(key, deps = new Set());
    deps.add(activeEffect);
    // 记录完副作用函数后 activeEffect 置空
    setActiveEffectNull();
}
function trigger(target, key) {
    const depsMap = bucket.get(target);
    if (!depsMap)
        return;
    const deps = depsMap.get(key);
    deps && deps.forEach(cb => cb());
}
// 封装一个 reactive 函数，实现对对象的拦截
function reactive(obj) {
    return new Proxy(obj, {
        get(target, key) {
            track(target, key);
            return target[key];
        },
        set(target, key, newVal) {
            target[key] = newVal;
            trigger(target, key);
            return true;
        }
    });
}

响应式数据和副作用函数之间的关系

const person3 = reactive({
    name: 'Andy',
    age: 5,
});
effect(() => {
    document.querySelector('#person3 .effectOuter').innerText = person3.name;
})
effect(() => {
    document.querySelector('#person3 .effectInner').innerText = person3.age + 2;
})
effect(() => {
    document.querySelector('#person3 .effectInner').innerText = person3.age + 3;
})

// WeakMap
WeakMap {{…} => Map(2)}
	0: {Object => Map(2)}
		key: {name: 'Tom', age: 100}
		value: Map(2)
			0: {"name" => Set(1)}
			1: {"age" => Set(2)}

图示：
请添加图片描述

副作用函数嵌套的处理

在副作用函数 effect 函数中嵌套使用 effect，对应到 vue 的使用情形是在一个组件中使用了另一个组件。看如下情况，出现了副作用函数未被正确的属性收集的问题：

<div id="person3">
    <h1 class="effectOuter"></h1>
    <h1 class="effectInner"></h1>
</div>
<script>
    const person3 = reactive({
        name: 'Andy',
        age: 5,
    });
    effect(() => {
        console.log('effectOuter')
        effect(() => {
            console.log('effectInner');
            document.querySelector('#person3 .effectInner').innerText = person3.age + 1;
        })
        document.querySelector('#person3 .effectOuter').innerText = person3.name;
    })

    setTimeout(() => {
        person3.name = 'Tom';
    }, 3000)
    // effectOuter
    // effectInner
    // effectInner
    /*
    	符合预期的结果，同时页面上的 name 改为 Tom
    	// effectOuter
    	// effectInner
    	// effectOuter
    	// effectInner
    */
</script>

出现以上问题的原因在于副作用函数收集出了问题：activeEffect 变量在执行嵌套 effect 函数时发生了改变。执行到内部的 effect 函数时 activeEffect 被覆盖为内部的 effect 函数并且不再改变，再之后执行外部的代码触发 track 函数此时保存的是内部的 effect 函数。知道原因后，我们可以添加 effectStack 变量，用来记录 activeEffect。 修改后的代码如下：

// 创建一个全局变量，用来保存被注册的副作用函数
let activeEffect;
// 创建变量 effectStack 用来保存 activeEffect
const effectStack = [];
// effect 函数用来注册副作用函数，而非副作用函数本身
function effect(fn) {
    activeEffect = fn;
    // activeEffect 入栈，当存在 effect 嵌套时保存所有的 activeEffect（副作用函数）
    effectStack.push(activeEffect);
    // 副作用函数执行，若存在 effect 嵌套，则会重新调用 effect，将 activeEffect 入栈
    fn();
    // 将已执行的副作用函数出栈
    effectStack.pop();
    // 还原副作用函数为之前的值
    activeEffect = effectStack[effectStack.length - 1];
}

避免无限递归循环

考虑如下情况，当属性自加时，会直接报错 Uncaught RangeError: Maximum call stack size exceeded：

const person = reactive({
    name: 'Andy',
    age: 5,
});
effect(() => {
    console.log('effect');
    document.querySelector('#person3 .effectInner').innerText = person.age++;
})

原因发生在 person.age++ 上，当进行自增操作时其实会分成两步：读取 person.age 的值，加 1 后再修改 person.age 值。既触发了 get 执行 track 函数收集副作用函数，又触发 set 执行 trigger 函数执行副作用函数。解决方式很简单：在 trigger 函数中增加判断，如果trigger 函数中执行的副作用函数与需要收集的副作用函数相同，则不执行副作用函数，代码修改如下：

function trigger(target: obj, key: string) {
    const depsMap = bucket.get(target);
    if (!depsMap) return
    const deps = depsMap.get(key);
    //新增变量 effectToRun 保存需要执行的副作用函数,避免无线递归循环
    const effectToRun = new Set<fn>();
    deps && deps.forEach(effect => {
        if (effect !== activeEffect) {
            effectToRun.add(effect)
        }
    });
    effectToRun.forEach(effect => effect())
}

整个代码部分：

    // 创建一个全局变量，用来保存被注册的副作用函数
    let activeEffect;
    // 创建变量 effectStack 用来保存 activeEffect
    const effectStack = [];
    // effect 函数用来注册副作用函数，而非副作用函数本身
    function effect(fn) {
        activeEffect = fn;
        // activeEffect 入栈，当存在 effect 嵌套时保存所有的 activeEffect（副作用函数）
        effectStack.push(activeEffect);
        // 副作用函数执行，若存在 effect 嵌套，则会重新调用 effect，将 activeEffect 入栈
        fn();
        // 将已执行的副作用函数出栈
        effectStack.pop();
        // 还原副作用函数为之前的值
        activeEffect = effectStack[effectStack.length - 1];
    }

    // 创建一个全局的 bucket 变量，用来保存 data 和 Map 对象的映射关系
    const bucket = new WeakMap();
    // get 拦截函数中调用 track 记录各属性对应的副作用函数
    function track(target, key) {
        if (!activeEffect)
            return;
        // 创建一个 depsMap 变量，用来保存属性和 Set 对象的映射关系
        let depsMap = bucket.get(target);
        // 如果 data 不存在，则新建一个以 data 为 key，value 为 Map 的映射
        !depsMap && bucket.set(target, (depsMap = new Map()));
        // 创建一个 dep 变量，用来保存所有的 effect 函数
        let deps = depsMap.get(key);
        !deps && depsMap.set(key, deps = new Set());
        deps.add(activeEffect);
        // 记录完副作用函数后 activeEffect 置空
        // setActiveEffectNull();
    }
    function trigger(target, key) {
        const depsMap = bucket.get(target);
        if (!depsMap)
            return;
        const deps = depsMap.get(key);
        //新增变量 effectToRun 保存需要执行的副作用函数,避免无线递归循环
        const effectToRun = new Set();
        deps && deps.forEach(effect => {
            if (effect !== activeEffect) {
                effectToRun.add(effect);
            }
        });
        effectToRun.forEach(effect => effect());
    }
    // 封装一个 reactive 函数，实现对对象的拦截
    function reactive(obj) {
        return new Proxy(obj, {
            get(target, key) {
                track(target, key);
                return target[key];
            },
            set(target, key, newVal) {
                target[key] = newVal;
                trigger(target, key);
                return true;
            }
        });
    }
单线程12138
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html自适应布局_三分钟学会响应式布局和自适应布局
weixin_40008033的博客
12-01 3581
响应式布局和自适应布局详解响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中...
vue3的数据响应式源码实现分析
qq_44472790的博客
04-06 396
reactive函数式响应式一个入口，主要是判断只读属性和绑定数据响应式，createReactiveObject方法是真正做数据代理和响应式 export function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. if (isReadonly(target)) { return target } return createRea
Vue 3.0响应式系统编程概述
weixin_44213825的博客
09-27 2128
Vue 3.0响应式系统简单实现响应式系统原理3.x响应式回顾核心方法proxy回顾源码实现reactive（只能转换对象）依赖收集effect、 tracktrigger 触发更新ref - 可以接受对象或者基础类型，如果是响应式对象直接返回，是对象则内部会调用reactive将其转换为响应式对象，如果是普通的值则转为具有一个value属性的响应式对象toRefs - 传入的对象必须是reactive返回的响应式对象（proxy对象）然后将传入对象的属性转换为类似ref返回的对象然后将属性挂载在一个新的对
Vue3源码阅读(十)响应式系统总结
一一
08-13 112
响应式系统总结 Vue2响应式原理采用的是defineProperty,而vue3选用的是Proxy+Reflect来实现的数据代理。这两者前者只能劫持对象的属性修改对象属性的权限标签,后者是代理整个对象并区分浅层代理。性能上proxy会更加优秀。且Object.defineProperty对新增属性需要手动进行Observe。 vue2.x版本使用了Object.defineProperty来实现双向绑定,根据具体的key去读取和修改。其中的setter方法来实现数据劫持的,getter实现数据的修改
Vue3——响应式实现（ref、reactive）
mantou_riji的博客
07-24 3391
setup是Vue3中一个新的配置项，值为。eg：返回一个对象: App.vue eg2： 返回的是 在vue2中中的属性会通过原理最终包装成响应式数据_data。 vue3中为我们提供了两种包装响应式数据的方法：ref和reactive注意这里的ref和vue2中的ref不一样，这里是一个。上面使用setup包裹页面数据，但是这样编写出的数据不是响应式的，即数据改变页面不会被重新加载。从vue2中我们知道一个数据要实现响应式一定有对应的响应式得getter和setter方法，在vue3中通过帮我们生成响
vue3源码 vue-next源码
06-09
vue3都出来这么久了，还不学起来等啥呢？组合式api，proxy做数据响应，平台无关的虚拟dom。最新的源码，感觉download学习吧！！学不动的就算了，别勉强
vue源码学习总结 深入响应式原理
01-08
深入响应式原理图 请反复观看原理图，画这个图的人请收下我的膝盖。。。 从initState切入，发现有3种watcher Vue.prototype._init= function (options?: Object) { callHook(vm, 'beforeCreate') initInjections...
mini-vue3.0:vue-next vue2.x vue3.0源码学习
03-23
mini-vue3.0主要涵盖5个功能点：模板编译，数据响应式，组件挂载和更新，指令编译，组件初始化调度更新： 指令编译及执行 组件调试更新 待办事项清单 vue3.0组件模板动静分离优化原理 vue架构图 简单一点渲染过程...
Vue3.0 响应式系统源码逐行分析讲解
10-16
主要介绍了Vue3.0 响应式系统源码逐行分析讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue源码学习 — 响应式原理之观察者模式
01-08
观察者模式又被称为 发布-订阅 模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。 优点 观察者与被观察者是抽象耦合的 建立了一套...
记一次Vue3的数据响应式学习
A88552211的博客
04-15 689
function reactive(data) { return new Proxy(data, { // 读取属性是调用 get(target, propName) { console.log('我正在被嗲用', target, propName) return Reflect.get(target, propName) }, // 修改属性或添加新的属性时调用 set(target, propName,...
Vue2、Vue3响应式实现方案原理模拟，只是简单的模拟
ChuanyangChen的博客
05-26 242
Vue2 / Vue3响应式实现方案原理模拟，只是简单的模拟 ｜｜来源：尚硅谷前端vue视频，它家的视频巨好 「模仿」Vue2响应式实现方案 ⭕️ 原理：使用defineProperty() let person = { name:'ulrich' } let p = {} Object.defineProperty(p,'name',{ configurable: true, get(){ return person.name }, set(value){ consol
vue3响应式原理及简易实现
weixin_44945847的博客
03-01 263
vue3响应式原理及简易源码实现
超详细Vue3响应式原理介绍加源码阅读
weixin_47042983的博客
02-03 2691
本章介绍Vue中另一个非常重要的模块，响应式。介绍了基本原理（含图）简单实现以及如何阅读源码。
Vue3源码解析-响应式原理
很多时候犯错都是在不知情的情况下发生的
07-10 863
前言 Vue3对Vue2中的响应式原理使用Proxy进行了重写，本文我们将对Vue3响应式的源码进行分析。 Vue3中提供了四种创建不同类型的响应式数据的方式，分别是： reactive 返回的是一个proxy对象，如果访问返回的proxy对象的属性是一个Object类型，会继续调用reactive，进行深度递归 shallowReactive 返回一个proxy对象，但是只有第一层的属性是响应式 readonly 返回一个proxy对象，如果属性是对象可以继续调用readonly，但是属性是只读
Vue 3 响应性原理以及源码分析
weixin_42910765的博客
02-23 1045
Vue 3 响应性原理Reactivity（数据是怎么更新的）Proxy & Reflect（何时让数据变化）reactive的函数Ref实现实现computed()方法 Vue响应式系统的核心依然是对数据进行劫持，只不过Vue3采样点是Proxy类，而Vue2采用的是Object.defineProperty()。Vue3之所以采用Proxy类主要有两个原因: 可以提升性能，Vue2是通过层层递归的方式对数据进行劫持，并且数据劫持一开始就要进行层层递归(一次性递归)，如果对象的路径非常深将会非常
【Vue3源码学习】响应式api: computed
ColdCoder的博客
03-03 2389
computed 是组件的计算属性，它的含义是依赖于其他状态而生成的状态，与响应式紧密相关。
vue3.x源码剖析之数据响应式
qq_46335862的博客
01-06 1644
前言 如果错过了秋枫和冬雪，那么春天的樱花一定会盛开吧。最近一直在准备自己的考试，考完试了，终于可以继续研究源码和写文章了，哈哈哈。学过vue的都知道，数据响应式在vue框架中极其重要，写代码也好，面试也罢，数据响应式都是核心的内容。在vue3的官网文档中，作者说如果想让数据更加响应式的话，可以把数据放在reactive里面，官方文档在讲述这里的时候一笔带过，笔者刚开始也不是很理解。后来看了源码才知道，在vue3里面响应式已经变成了一个单独的模块，而处理响应式的模块就是reactive； 数据响应式的大体流
【Vue3源码学习】响应式源码解析：reactive、effect、ref
ColdCoder的博客
03-01 2141
源码版本 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响应式源码分析
最新发布
08-13
- *2* [【Vue3源码学习】响应式源码解析：reactive、effect、ref](https://blog.csdn.net/qq_38987146/article/details/123117327)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值