Vue3源码第二篇-Reactive API

朴灿烈づ我的快乐病毒、 2022-09-06 15:22 270阅读 0赞

# Vue3源码笔记系列文章 #

[Vue3源码 第一篇-总览][Vue3_ _-]  
[Vue3源码 第三篇-Vue3是如何实现响应性][Vue3_ _-Vue3]  
[Vue3源码 第四篇-Vue3 setup][Vue3_ _-Vue3 setup]

### 文章目录 ###

*  Vue3源码笔记系列文章
 *  前言
 *  一、Reactive API是什么？
 *  二、Reactive API 具体使用
 *   *  1.reactive
     *  2.readonly
     *  3.isProxy，isReactive，isReadonly
     *  4.toRaw
     *  5.markRaw
     *  6.shallowReactive，shallowReadonly
     *  7.ref
     *  8.unref
     *  9.toRef
     *  10.toRefs
     *  11.isRef
     *  12.customRef
     *  13.shallowRef
     *  14.triggerRef
     *  15.computed
     *  16.watchEffect，watch
 *  总结

--------------------

# 前言 #

Vue3中Reactive API作为基础，读懂他的源码是非常重要的，因为无论是Option Api还是Composition Api，都依赖于Reactive API 提供响应式的支持，在我们后面学习Option API和Composition API有着很大的帮助，只有搞清楚了Reactive API才能更好地进行后面的学习，学习过程中需要有一些前置的知识[MDN官方proxy语法][MDN_proxy]，大家需要学习下ES6的Proxy。

# 一、Reactive API是什么？ #

[Vue3 Reactive API章节][Vue3 Reactive API]  
Vue2中是通过数据劫持Object.defineProperty来实现数据的响应式的，而3版本中对响应式做了重构，采用了Proxy数据代理的方法来实现整个Reactive API的底层实现，一会会通过例子带大家理解Reactive API的每一个方法，并且附带上对应的源码分析！话不多说，冲冲冲~![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjI2MTEz_size_16_color_FFFFFF_t_70_pic_center]

# 二、Reactive API 具体使用 #

## 1.reactive ##

返回对象的响应式副本，代码如下（示例）：

const { reactive} = Vue;
    const pet = reactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity"
    })

源码

function reactive(target) { 
     	// if trying to observe a readonly proxy, return the readonly version.
        if (target && target["__v_isReadonly" /* IS_READONLY */]) { 
            return target;
        }
        return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
    }

我们先了解下createReactiveObject方法的5个参数：  
1.**target**就是我们传入的对象  
2.**false**是否是只读，这里并不是只读，所以传入false  
3.**mutableHandlers** 作为proxy函数的handler

const mutableHandlers = { 
        get,
        set,
        deleteProperty,
        has,
        ownKeys
    };

4.**mutableCollectionHandlers** 同作为proxy函数的handler，根据target类型的不同来决定绑定mutableHandlers还是mutableCollectionHandlers

const mutableCollectionHandlers = { 
       get: createInstrumentationGetter(false, false)
    };

5.**reactiveMap** 是一个WeakMap的Cache，为什么选择WeakMap不是Map，本人觉得是key为对象时GC无法回收Map中的值，作为Cache来说WeakMap更好。  
介绍完了参数在来看一下createReactiveObject函数

该函数主要作用就是将给定的target进行proxy代理，当然对于不同的target有不一样的handler，通过targetType来区别不同的target，这里简单把代码贴上来，并不是很难理解，对于Object和Array我们在proxy时使用的是**mutableHandlers**而Map，Set等类型使用的是**mutableCollectionHandlers**，这2个handler会在之后的模版函数到真实Dom渲染的章节和响应式更新章节来具体讲解其中的源码，在这里只是了解Reactive API的源码。

function targetTypeMap(rawType) { 
            switch (rawType) { 
                case 'Object':
                case 'Array':
                    return 1 /* COMMON */;
                case 'Map':
                case 'Set':
                case 'WeakMap':
                case 'WeakSet':
                    return 2 /* COLLECTION */;
                default:
                    return 0 /* INVALID */;
            }
        }

## 2.readonly ##

返回一个只读的Proxy代码如下（示例）：

const { reactive, readonly} = Vue;
    
    const pet = reactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity"
    })
    
    const copyPet = readonly(pet);

源码

function readonly(target) { 
        return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);
    }

可以看出和reactive非常相似，第二参数传入readonly为true，第三第四个Proxy的代理handler变为readonly的处理函数，Cache也改为单独的readonly的Cache，我们可以看一下readonlyHandlers函数，set和deleteProperty都无法操作。

## 3.isProxy，isReactive，isReadonly ##

检查对象是否是由 reactive 或 readonly 创建的 proxy 代码如下（示例）：

const { reactive, readonly, isProxy} = Vue;
    
    const pet = reactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity"
    })
    
    const copyPet = readonly(pet);
    
    isProxy(pet);
    isProxy(copyPet);

源码

判断逻辑是通过传入的值是否存在内部属性\_\_v\_raw，\_\_v\_isReactive，\_\_v\_isReadonly来判断。为什么这么判断呢，是因为经过readonly和reactive函数的对象返回的是对象的proxy，在proxy访问上面3个属性时存在特殊处理，我们可以简单看一下proxy的get相关部分代码

当然这种判断是可以判断是否是reactive和readonly函数创建的，但不一定正确（杠精一下），因为通过源码其实我们是知道判断逻辑的，我们可以写自己的proxy的handler来处理这些逻辑使得返回结果一样。当然不会有人这么闲~~

## 4.toRaw ##

返回 reactive 或 readonly 代理的原始对象 代码如下（示例）：

const { reactive,toRaw} = Vue;
    
    const pet = reactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity"
    })
    
    console.log(toRaw(pet) === pet) // true

源码

function toRaw(observed) { 
       return ((observed && toRaw(observed["__v_raw" /* RAW */])) || observed);
    }

逻辑并不难，就是判断是否存在该对象，从之前介绍的proxy get中我们也能看到对\_\_v\_raw的处理，就是从不同的Cache中去取对应的target，这里如果不是reactive和readonly创建出来的就直接返回原值。

## 5.markRaw ##

标记一个对象，使其永远不会转换为 proxy。返回对象本身。 代码如下（示例）：

const { reactive, markRaw, isReactive} = Vue;
    
    const petRaw = markRaw({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity"
    })
    
    console.log(isReactive(reactive(petRaw))) // false

源码

本质上是通过给对象加上\_\_v\_skip属性来避免被处理，Vue3中的Vnode也有该属性，都是为了避免被**createReactiveObject**创建proxy。在**createReactiveObject**函数中没有单独介绍的一个方法**getTargetType**，下面是该函数的源码

function getTargetType(value) { 
        return value["__v_skip" /* SKIP */] || !Object.isExtensible(value)
            ? 0 /* INVALID */
            : targetTypeMap(toRawType(value));
    }

也就是当我们的对象通过readonly或者reactive创建时如果target上存在\_\_v\_skip属性，将不会处理。

## 6.shallowReactive，shallowReadonly ##

创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。。暴露原始值是因为没有proxy，拿到的就是原始值 代码如下（示例）：

const { shallowReactive, isReactive} = Vue;
    
    const pet = shallowReactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity",
        dashboard: { 
            speed: "A",
            Growth: "S"
        }
    })
    console.log(isReactive(pet.dashboard)); // false

源码

function shallowReactive(target) { 
        return createReactiveObject(target, false, shallowReactiveHandlers, 
        shallowCollectionHandlers, shallowReactiveMap);
    }

跟reactive的区别在于proxy的handler中的处理逻辑不同，代码如下

shallowReactive传入的shallow为true，可以看到当得到值之后如果是shallow就直接返回，不再去为子对象创建proxy了。shallowReadonly其实原理也是这样的，没有太大的差别，就不单独介绍了！

## 7.ref ##

ref作用和reactive差不太多，但是简单来说ref作用在基础类型，并非对象 这里用官网的示例 代码如下（示例）：

const count = ref(0)
    console.log(count.value) // 0
    
    count.value++
    console.log(count.value) // 1

源码

通过源码我们看出来为什么通过.value去获取值，因为构建了RefImpl类，类中对value的get，set方法进行了创建，所有我们对ref操作都是对value的操作，我们还能发现一点，当我们传入的是对象时，他会帮我们调用reactive方法。

## 8.unref ##

如果参数是一个 ref，则返回内部值，否则返回参数本身  
源码

function unref(ref) { 
        return isRef(ref) ? ref.value : ref;
    }

这个很简单的代码，就是一个简单的判断。

## 9.toRef ##

将从响应式对象上的某个属性创建ref，保留对其源的响应式连接，示例：

const { reactive,toRef} = Vue;
    
    const pet = reactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity"
    })
    const name = toRef(pet, 'name');
    pet.name = "杰尼龟";
    console.log(name.value); // 杰尼龟

源码

源码并不难，可以看到这里如果传入的值不是响应式的就会通过ObjectRefImpl类创建一个拥有对value访问的get和set方法，get和set方法中是对源对象的引用进行访问，并非赋值操作，如果传入的Object是响应式的就直接返回。

## 10.toRefs ##

官方解释：将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。 其实就是对对象中的每个属性进行toRef 代码如下（示例）：

const { reactive, toRefs} = Vue;
    const pet = reactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity"
    });
    const name = toRefs(pet);

源码

从源码中我们可以知道是可以传入普通对象的，普通对象会在toRef中进行转换，之前已经在toRef中提到了，简单来说就是对传入对象的每一个属性进行toRef操作。

## 11.isRef ##

检查值是否为一个 ref 对象。 代码如下（示例）：

const { reactive, toRef, isRef} = Vue;
    
    const pet = reactive({ 
        name: "皮卡丘",
        voice: "pka~pka",
        power: "electricity",
    })
    const name = toRef(pet, 'name');
    console.log(isRef(name));// true

源码

function isRef(r) { 
        return Boolean(r && r.__v_isRef === true);
    }

源码很简单就是对比传入对象里是否包含\_\_v\_isRef 属性，我们之前介绍的源码中ref和toRef创建的过程中涉及到RefImpl和ObjectRefImpl的构造函数中都包含一行代码\*\*this.\_\_v\_isRef = true;\*\*包括后面要介绍的customRef，构造函数中都有这行代码。

## 12.customRef ##

官网解释：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。 代码如下（示例）：一个简单的异步更改名字的customRef

const { customRef} = Vue;
    const Counter = { 
        setup() { 
            const name = nameAsyncRef("皮卡丘");
            return { 
                name
            }
        }
    }
    
    function nameAsyncRef(value) { 
        return customRef((track, trigger) => { 
            setTimeout(() => { 
                value = "杰尼龟";
                trigger();
            },2000);
            return { 
                get() { 
                    track();
                    return value
                },
                set(newValue) { 
                    value = newValue;
                    trigger();
                }
            }
        })
    }

源码

这段源码涉及到Vue3响应的核心track和trigger，Vue3通过这2个方法来代替Vue2中的watcher，我们给customRef函数传入函数参数，通过CustomRefImpl的构造函数注入了track函数和trigger函数。track和trigger这里简单说明下，后面的篇章会详细介绍这2个函数。简单来说track是跟踪，get方法中调用track函数来收集依赖，其中重要的变量：

1.  **targetMap**：是一个weakMap 跟踪缓存，key当前对象，value是一个所有订阅该对象的Map也就是**depsMap**
2.  **depsMap**：是一个Map类型，key为当前对象的某个属性这里是value属性（ref的value属性值），**depsMap**的value存储的是一个Set数组，里面存放着当前的激活的副作用**activeEffect**
3.  **activeEffect**当前激活的副作用，也就是订阅者。

再说一下trigger，通过`const depsMap = targetMap.get(target);`找到该对象的所有订阅者，在执行`if (key !== void 0) { add(depsMap.get(key)); }`找到该key也就是ref的value属性对应的订阅者加入到**effects**数组中，最后通过`run`方法执行`effect`。通过effect重新渲染界面更新数据，之后的篇章会对整个更新过程进行详细的讲解，这里就简单介绍一下trigger和track，更复杂的effect暂时不在这里展开了。**总结来说就是track的作用是收集谁依赖与我，trigger的作用就是我变化了，从谁依赖我的数组中，拿出来一个一个去改变！**

## 13.shallowRef ##

官网解释：创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。初看确实有点拗口，简单来说就是shallowRef对象时可以追踪对象里的变化，但是不再为对象添加proxy代理。所以只有自身可以追踪。 结合Ref看就一目了然了，代码如下（示例）：

const {  shallowRef, ref, isReactive } = Vue;
    
    const petShallow = shallowRef({ 
        name: "皮卡丘"
    });
    console.log(petShallow.value); // {name: "皮卡丘"}
    console.log(isReactive(petShallow.value)) // false
    petShallow.value = { 
        name: "杰尼龟"
    };
    console.log(petShallow.value) // {name: "杰尼龟"}
    console.log(isReactive(petShallow.value)) //false
    
    const petRef = ref({ 
        name: "皮卡丘"
    });
    console.log(petRef.value); // 皮卡丘 Proxy {name: "皮卡丘"}
    console.log(isReactive(petRef.value)) // true
    petRef.value = { 
        name: "杰尼龟"
    };
    console.log(petRef.value) // 杰尼龟 Proxy {name: "杰尼龟"}
    console.log(isReactive(petRef.value)) // true

源码

这段源码是不是相当熟悉，其实这段源码和ref的源码一样，区别在于`this._shallow = _shallow` `this._value = _shallow ? _rawValue : convert(_rawValue);`这2个地方，从第二也就能看出与ref的区别来，当传入的值是对象时，不会再去调用reactive。

## 14.triggerRef ##

官方解释：手动执行与 shallowRef 关联的任何副作用。 简单的来说就是激活所有他的订阅者代码如下（示例）：

const {  triggerRef, watchEffect, shallowRef } = Vue;
    
    const petShallow = shallowRef({ 
        name: "皮卡丘"
    });
    // 第一次运行时记录一次 "Hello, world"
    watchEffect(() => { 
        console.log(petShallow.value.name)
    })
    petShallow.value.name = "杰尼龟";
    
    triggerRef(petShallow);

源码

function triggerRef(ref) { 
        trigger(toRaw(ref), "set" /* SET */, 'value', ref.value );
    }
    function toRaw(observed) { 
        return ((observed && toRaw(observed["__v_raw" /* RAW */])) || observed);
    }

源码很简单，其实就是手动执行trigger，之前我们介绍过这个函数了，下面的代码可以看到RefImpl类的get会调用track函数收集订阅者，所以执行trigger函数时，就会更新值。

class RefImpl {    
        get value() { 
            track(toRaw(this), "get" /* GET */, 'value');
            return this._value;
        }
    }

## 15.computed ##

官方解释：接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象，或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。其实和之前的OptionAPI中的computed没什么区别，用法一样。代码如下（示例）：

const {  computed, reactive } = Vue;
    
    const pet = reactive({ 
        name: "皮卡丘"
    });
    const addDesc = computed(() => pet.name = `打工人${ pet.name}`);
    console.log(addDesc.value);// 打工人皮卡丘
    pet.name = "杰尼龟";
    console.log(addDesc.value); // 打工人杰尼龟

源码

第一步是根据参数`getterOrOptions` 是否是函数来确定是只读还是get和set都存在，设置好getter和setter后构建`ComputedRefImpl`，我们具体看下一这个类

class ComputedRefImpl { 
        constructor(getter, _setter, isReadonly) { 
            this._setter = _setter;
            this._dirty = true;
            this.__v_isRef = true;
            this.effect = effect(getter, { 
                lazy: true,
                scheduler: () => { 
                    if (!this._dirty) { 
                        this._dirty = true;
                        trigger(toRaw(this), "set" /* SET */, 'value');
                    }
                }
            });
            this["__v_isReadonly" /* IS_READONLY */] = isReadonly;
        }
        get value() { 
            // the computed ref may get wrapped by other proxies e.g. readonly() #3376
            const self = toRaw(this);
            if (self._dirty) { 
                self._value = this.effect();
                self._dirty = false;
            }
            track(self, "get" /* GET */, 'value');
            return self._value;
        }
        set value(newValue) { 
            this._setter(newValue);
        }
    }

设置了`_dirty = true` 标志是否需要更新，`__v_isRef = true`所有我们对computed的读取都是通过.value就是因为他属于ref类型，其次定义了computed对value的get和set方法，这里面computed响应的核心effect，这里不过多介绍，因为后面的章节会单独介绍Vue3中响应式的过程。这里简单说一下，我们之前介绍过在在获取值时会调用**track**来收集订阅者也就是我们这里的各类effect，而更新值时会调用**trigger**来调用收集到的effect。执行effect时会执行其中的scheduler函数，computed的**scheduler**就继续调用trigger函数，直到调用到最外层的渲染Effect结束，渲染effect会调用computed的get方法获取最新值。

this.effect = effect(getter, { 
       lazy: true,
       scheduler: () => { 
           if (!this._dirty) { 
               this._dirty = true;
               trigger(toRaw(this), "set" /* SET */, 'value');
           }
       }
    });

## 16.watchEffect，watch ##

watchEffect，watch 监听值得变化，watchEffect相对是简单版本的watch，watchEffect会立即执行传入的函数，而watch并不会。代码如下（示例）：

const {  watchEffect, reactive, watch } = Vue;
    const pet = reactive({ 
        name: "皮卡丘"
    });
    const addDescEffectWatch = watchEffect(() => { 
        console.log(`打工人${ pet.name}`)
    });
    const addDescWatch = watch(pet, (pet, oldPet) => { 
        console.log(`打工人${ pet.name}`)
    });
    pet.name = "杰尼龟";
    // 一共打印3次effectWatch会立即执行一次，所以打印2个，watch并不会立即执行所以执行一次
    // 打工人皮卡丘
    // 打工人杰尼龟
    // 打工人杰尼龟

源码

watch,watchEffect的源码比较多，核心部分和computed有点类似都是track,trigger,effect相关的部分，所以下一篇打算单独来讲讲Vue3 和响应核心track 追踪 triiger 触发器和副作用函数effect，无论是界面渲染，还是watch，watchEffect，computed都离不开effect函数的创建，所以在一下篇章将重点对track，trigger，effect这3个函数进行讲解。

# 总结 #

以上就是今天要讲的内容，对所有reactiveAPI做了一个基本的源码介绍，如果有哪里不明白或不清楚欢迎留言反馈~，你的支持就是我更新的动力。给个三连吧，求求了，这个对我真的很重要  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]

[Vue3_ _-]: https://blog.csdn.net/qq_26626113/article/details/119169666
[Vue3_ _-Vue3]: https://blog.csdn.net/qq_26626113/article/details/120583561
[Vue3_ _-Vue3 setup]: https://blog.csdn.net/qq_26626113/article/details/120657470
[MDN_proxy]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
[Vue3 Reactive API]: https://v3.cn.vuejs.org/api/reactivity-api.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjI2MTEz_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/b28516e24cb7412295508f4cedc9a5a4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/4ea40e3c76f8491b912b3ef356c2f3e6.png