解密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); 

解密Vue中的神奇原理:深入剖析reactive和ref的工作机制(二)

大家也看到了,里面封装的就是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,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!

原文链接:https://juejin.cn/post/7338314540302532647 作者:小白234

(0)
上一篇 2024年2月23日 上午10:43
下一篇 2024年2月23日 上午10:53

相关推荐

发表评论

登录后才能评论