解密Vue中的神奇原理：深入剖析reactive和ref的工作机制（二）

上一篇文章咱们讲了reactive的源码解析，信任咱们现已对其现已有了深刻的了解，那么ref和它有什么不同呢？

这一篇文章，咱们就来了解一下ref是怎样完成的。上一篇文章提到，reactive是用于让目标变成呼应式，那么原始类型怎样办呢，运用ref完成吗，，没错，正如咱们所想的那样，原始类型的呼应式完成正是依托ref，而且ref功用更为强壮，它还能使目标变成呼应式，也便是说，它涵盖了reactive的功用。

引进

import { ref } from 'vue';
const count = ref(1)
console.log(count.value); // 1

上面的打印结果是1，信任咱们都能承受，可是为什么count后边要接.value呢。

首先呢，ref回来的是一个目标，访问目标里面的特点运用.xxx没缺点吧，至于为什么是.value，咱来看看这个目标里面有什么：

console.log(count.value);

咱们也看到了，里面封装的便是value，所以入情入理。那么究竟是怎样完成的呢？

完成一个简略的ref

咱们现已知道reactive完成的中心便是Proxy，那么ref肯定是不能这样的，因为Proxy只能承受目标作为为参数。所以咱们只能自己打造一个署理函数来完成呼应式。那应该怎样做呢？首先咱们得知道

1. 当数据是目标时，继续运用Proxy署理
2. 在函数内部咱们也运用一个this.__V_isRef = true特点来记载是否现已是呼应式
3. 运用this._value = target存放传进来的数据
4. get value() {} 用于获取值 相当于 Proxy中的get
5. set value(newVal) {} 用于修正值 相当于 Proxy中的set

class RefImal { // 创建一个结构函数，用于将val变成呼应式
    constructor(target) {
        this.__V_isRef = true // 给现已署理过的target打上标记,用于判断是否现已是呼应式
    if(typeof target !== 'object' || target === null) {
        this._value = target
    } else {  // 目标运用Proxy署理
        this._value = new Proxy(target,{
            get: (target,key,receiver) => {
                const res = Reflect.get(target,key,receiver) // 获取值
                // 搜集副作用函数（即用到了这个特点的函数）
                track(target,key) // 用于搜集副作用函数，具体代码参考上一篇reactive的文章
                return res
            },
            set: (target,key,value,receiver) => {
                Reflect.set(target,key,value,receiver) // 修正值
                // 值改变时触发副作用函数
                trigger(target,key) // 用于触发副作用函数，具体代码参考上一篇reactive的文章
                return true 
            }
        })
    }
    }
    // 获取值
    get value() {
        const res = this._value
        if(typeof res === 'object' && res !== null) {
            return res // 是目标，现已搜集过副作用函数，直接回来
          }
        track(this, 'value')
        return res
    }
    // 修正值
    set value(newVal) {
        this._value = newVal
        trigger(this, 'value')
        return true
    }
}

上面的是中心，接下来便是主体部分，这个比较简略，和reactive差不多

export function ref(target) {
    // 判断是否现已是呼应式
    if(target.__V_isRef){
        return
    }
    // 将val变成呼应式
    const refimal = new RefImal(target) 
    // 回来val
    return refimal
}

这样咱们就完成了一个简略的ref，是不是很简略，接下来咱们来说说它们的差异。

差异

• 功用方面：

1. ref的功用显然是比reactive强壮的，它不仅可以使原始类型变成呼应式，还能使引用类型变成呼应式。
2. reactive只能使目标变成呼应式。

• 运用：

1. ref署理的数据在运用时要加上xxx.value,假如署理的数据是目标还要加上key，如xxx.value.key
2. reactive署理的数据运用时只需要xxx.key
3. 所以原始类型的署理咱们一般运用ref，目标一般运用reactive，这便是为什么ref明明涵盖了reactive的功用，还要打造一个reactive

假如您也和我相同，在预备春招。欢迎加我微信shunwuyu，这里有几十位专心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！