Vue 3.0源码系列之ref、toRef、toRefs

大家好，我是初心，本篇是源码系列之ref、toRef、toRefs 本篇也是我坚持原创文章的第04期文章,如有错误，欢迎指正👏🏻

在讨论原始值的响应式方案，先看看原始值有哪些吧，目前阶段原始值分别是 Boolean, Number，BigInt, String, Symbol, undefined, null

前言

一、引入ref的概念

由于proxy代理目标必须是非原始值，所以我们没有任何手段拦截对原始值的操作，例如：

let name = 'luanshu';
// 无法拦截对值的修改
name = '巧君'; 

对于ref是一个函数创建响应式，在Vue2.0中已经规范了架子，采用options data对象形式，所以不需要考虑这个原始值的问题，对于这个问题，Vue3的作者及core核心成员们，想到了一个办法，目前官方说是唯一的办法，使用一个非原始值去 “包裹” 原始值，例如我们可以使用对象来包装

import { reactive } from 'Vue';

const wrapper = {value: 'luanshu'
}

// 可以使用 Proxy 代理wrapper,简洁实现对原始值的拦截
const userName = reactive(wrapper);

// 读取value
name.value // luanshu

// 修改值可以触发响应式
name.value = '巧君'; 

但是这样会导致两个问题:

1.用户为了创建一个响应式的原始值，不得不顺带创建一个包裹对象；
2.包裹对象有用户定义，而这以为着不规范，用户可以随意命名，例如wrapper.value 或者 wrapper.val 都是可以的。

为了解决这个问题，使用函数封装，将对象包裹起来封装到该函数中：

// 封装一个 ref 函数
function ref(val){// 在ref函数内部包裹对象const wrapper = {value: val,}// 将包裹对象变成响应式数据return wrapper;
} 

如上面的代码，我们把wrapper对象封装到ref函数内部,然后使用reactive函数将包裹对象变成响应式数据并返回，这样就解决了上述两个问题

import { effect } from 'Vue';

// 创建原始值的响应式数据
const refValue = ref('栾树');

effect(()=>{// 在函数副作用下 通过 value 值读取原始值console.log(refValue.value);
})

// 修改值能够触发副函数重新执行
refValue.value = 'luanshu'; 

我们都知道在Vue3.0中创建响应式有 ref 和 reactive 函数，现在就面临一个问题了，如何区分是reactive函数创建的响应式还是 ref 函数创建的响应式呢?

import { ref, reactive } from 'Vue';
// ref
const refValue = ref(1);
// reactive
const reactiveValue = reactive({ value: 1 }); 

core核心大佬们 想到使用Object.defineProperty区分

import { reactive } from 'Vue';

function ref(val){// 在ref函数内部包裹对象const wrapper = {value: val,}// Object.definePropertyObject.defineProperty(wrapper, '__v_isRef', {value: true,})//