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

上一篇文章我们讲了reactive的源码解析,相信大家已经对其已经有了深刻的理解,那么ref和它有什么不同呢?

这一篇文章,我们就来了解一下ref是如何实现的。上一篇文章说到,reactive是用于让对象变成响应式,那么原始类型怎么办呢,使用ref实现吗,,没错,正如大家所想的那样,原始类型的响应式实现正是依靠ref,并且ref功能更为强大,它还能使对象变成响应式,也就是说,它涵盖了reactive的功能。

引入

js 复制代码
import { ref } from 'vue';
const count = ref(1)
console.log(count.value); // 1

上面的打印结果是1,相信大家都能接受,但是为什么count后面要接.value呢。

首先呢,ref返回的是一个对象,访问对象里面的属性使用.xxx没毛病吧,至于为什么是.value,咱来看看这个对象里面有什么:

js 复制代码
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
js 复制代码
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差不多

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

相关推荐
木心操作22 分钟前
nodejs动态创建sql server表
前端·javascript·sql
一个很帅的帅哥25 分钟前
Vue中的data为什么是函数?
前端·javascript·vue.js·data
南屿im1 小时前
用 Node.js 开发命令行工具:打造你的高效 CLI
前端·javascript
小刘鸭地下城1 小时前
深入解析 Vue 的异步 DOM 更新机制:nextTick 的正确使用指南
vue.js
一个很帅的帅哥3 小时前
Vue keep-alive
前端·javascript·vue.js·keep-alive
lbh3 小时前
Chrome DevTools 详解(一):Elements 面板
前端·javascript·浏览器
明里人3 小时前
React 状态库:Zustand 和 Jotai 怎么选?
前端·javascript·react.js
迷知悟道3 小时前
java基础知识之接口---超详细(保姆级)
面试
儒雅的烤地瓜4 小时前
JS | 如何把一个伪数组转换成一个真正的数组?
javascript·from方法·数组转换·扩展运算符·slice方法·push方法
UrbanJazzerati4 小时前
一文带你了解表语
面试