Vue3.0进阶之深入学习响应式RefsAPI

本文转载自微信公众号「全栈修仙之路」，作者阿宝哥。转载本文请联系全栈修仙之路公众号。   

创新互联是一家专注于成都网站设计、成都做网站与策划设计,猇亭网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:猇亭等地区。猇亭做网站价格咨询:13518219792

本文是 Vue 3.0 进阶系列 的第九篇文章，在组合式 API setup 配置项中经常会见到 Refs API 的身影，比如 ref、toRef 或 toRefs 等。那么这些常用 API 的作用和使用场景是什么?它们背后的实现原理又是什么?接下来，阿宝哥将带着这些问题，跟大家一起来深入学习响应式 Refs API。

一、ref

该函数接受一个内部值并返回一个响应式且可变的 ref 对象，该对象内部含有一个 value 属性。

1.1 使用示例

 
 
 
 

  
  
  
  
const { ref } = Vue 
  
  
  
  
 
  
  
  
  
const skill = ref("Vue 3") 
  
  
  
  
console.log(skill.value) // Vue 3  
  
  
  
  
skill.value = "Vite 2" 
  
  
  
  
console.log(skill.value) // Vite 2 
 
 
 
 

1.2 函数实现

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
export function ref(value: T): ToRef 
  
  
  
  
export function ref(value: T): Ref> 
  
  
  
  
export function ref(): Ref 
  
  
  
  
export function ref(value?: unknown) { 
  
  
  
  
  return createRef(value) 
  
  
  
  
} 
 
 
 
 

由以上代码可知，ref 函数的 value 参数除了支持基本数据类型之外，也支持非基本数据类型的参数。在 ref 函数内部，会调用 createRef 工厂函数来创建 ref 对象。createRef 函数具体实现如下：

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
function createRef(rawValue: unknown, shallow = false) { 
  
  
  
  
  if (isRef(rawValue)) { 
  
  
  
  
    return rawValue 
  
  
  
  
  } 
  
  
  
  
  return new RefImpl(rawValue, shallow) 
  
  
  
  
} 
 
 
 
 

在创建 ref 对象时，如果发现 rawValue 参数本身就是 ref 对象的话，则会直接返回该对象。否则，会调用 RefImpl 构造函数创建 ref 对象。以 ref 使用的示例为例，通过 ref("Vue 3") 创建的 ref 对象的内部结构如下图所示：

从上图中，我们可以清楚地看到 ref 对象内部含有 __v_isRef、_rawValue 和 _value 等属性。那么这些属性有什么用呢?这里我们先来介绍 __v_isRef 属性的作用。

二、isRef

该函数用于检查指定值是否为一个 ref 对象。

2.1 使用示例

 
 
 
 

  
  
  
  
const { ref, isRef } = Vue 
  
  
  
  
 
  
  
  
  
const name = ref("阿宝哥") 
  
  
  
  
console.log(isRef(name)) // true 
 
 
 
 

2.2 函数实现

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
export function isRef(r: Ref | unknown): r is Ref 
  
  
  
  
export function isRef(r: any): r is Ref { 
  
  
  
  
  return Boolean(r && r.__v_isRef === true) 
  
  
  
  
} 
 
 
 
 

由以上代码可知，在 isRef 函数内部是通过 r && r.__v_isRef === true 表达式来判断参数 r 是否为 ref 对象。前面我们已经分析了 ref 函数，已经知道 ref 对象的本质是 RefImpl 类的实例。那么该实例上的 __v_isRef 成员属性是什么时候设置的呢?下面我们从源码中来查找该问题的答案：

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
class RefImpl { 
  
  
  
  
  private _value: T 
  
  
  
  
  public readonly __v_isRef = true 
  
  
  
  
  // 省略大部分代码 
  
  
  
  
} 
 
 
 
 

观察以上代码可知，__v_isRef 属性是一个公有的只读属性且它的值始终为 true。好的，了解完如何创建 ref 对象和如何检查指定值是否为一个 ref 对象之后，我们来介绍下一个函数 —— unref。

三、unref

该函数接受一个参数，如果该参数是一个 ref 对象，则返回该对象的内部值，否则返回参数本身。它是 val = isRef(val) ? val.value : val 的语法糖函数。

3.1 使用示例

 
 
 
 

  
  
  
  
const { ref, unref } = Vue 
  
  
  
  
 
  
  
  
  
const name = ref("阿宝哥") 
  
  
  
  
console.log(unref(name)) // "阿宝哥" 
 
 
 
 

3.2 函数实现

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
export function unref(ref: T): T extends Ref ? V : T { 
  
  
  
  
  return isRef(ref) ? (ref.value as any) : ref 
  
  
  
  
} 
 
 
 
 

在 unref 函数内部，会通过 isRef 函数判断 ref 参数是否为 ref 对象，如果是的话，则会返回 ref.value 的值，否则返回参数本身。

四、toRef

该函数可以用来为源响应式对象上的某个 property 新创建一个 ref。之后，ref 可以被传递，它会保持对其源 property 的响应式连接。

4.1 使用示例

 
 
 
 

  
  
  
  
const { reactive, toRef } = Vue 
  
  
  
  
 
  
  
  
  
const man = reactive({ 
  
  
  
  
  name: "阿宝哥", 
  
  
  
  
  skill: "Vue 3" 
  
  
  
  
}) 
  
  
  
  
const skillRef = toRef(man, 'skill'); 
  
  
  
  
console.log(`skillRef.value：${skillRef.value}`); // skillRef.value：Vue 3 
  
  
  
  
 
  
  
  
  
skillRef.value = "Vite 2"; 
  
  
  
  
console.log(`man.skill：${man.skill}`); // man.skill：Vite 2 
 
 
 
 

4.2 函数实现

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
export function toRef( 
  
  
  
  
  object: T, 
  
  
  
  
  key: K 
  
  
  
  
): ToRef { 
  
  
  
  
  return isRef(object[key]) 
  
  
  
  
    ? object[key] 
  
  
  
  
    : (new ObjectRefImpl(object, key) as any) 
  
  
  
  
} 
 
 
 
 

toRef 函数接受 object 和 key 两个参数，其中 object 参数的类型为非原始类型。在函数中，会判断 object[key] 对象是否为 ref 对象，如果是的话，直接返回 object[key] 的值，否则调用 ObjectRefImpl 类的构造函数并返回该类的实例：

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
class ObjectRefImpl { 
  
  
  
  
  public readonly __v_isRef = true // 用于标识 ref 对象 
  
  
  
  
 
  
  
  
  
  constructor(private readonly _object: T, private readonly _key: K) {} 
  
  
  
  
 
  
  
  
  
  get value() { 
  
  
  
  
    return this._object[this._key] 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  set value(newVal) { 
  
  
  
  
    this._object[this._key] = newVal 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

ObjectRefImpl 类的定义很简单，类中包含一个公有的只读属性 __v_isRef，该属性用于标识该类的实例是否为 ref 对象。除此之外，还包含了一个 setter 和 getter 方法，用来操作 value 的值。

五、toRefs

该函数用于将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。

5.1 使用示例

 
 
 
 

  
  
  
  
const { reactive, toRefs } = Vue 
  
  
  
  
 
  
  
  
  
const man = reactive({ 
  
  
  
  
  name: "阿宝哥", 
  
  
  
  
  skill: "Vue 3" 
  
  
  
  
}) 
  
  
  
  
console.log(toRefs(man)); 
 
 
 
 

5.2 函数实现

 
 
 
 

  
  
  
  
// packages/reactivity/src/ref.ts 
  
  
  
  
export function toRefs(object: T): ToRefs { 
  
  
  
  
  if (__DEV__ && !isProxy(object)) { 
  
  
  
  
    console.warn(`toRefs() expects a reactive object but received a plain one.`) 
  
  
  
  
  } 
  
  
  
  
  const ret: any = isArray(object) ? new Array(object.length) : {} 
  
  
  
  
  for (const key in object) { 
  
  
  
  
    ret[key] = toRef(object, key) // 调用 toRef 函数为对象的 property 新建一个 ref 
  
  
  
  
  } 
  
  
  
  
  return ret 
  
  
  
  
} 
 
 
 
 

由以上代码可知，toRefs 主要用于把响应式对象转换为普通对象， 在转换过程中是通过调用 toRef 函数来处理对象的每个属性。需要注意的是，toRefs 函数会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef 函数。

当 toRefs 示例的代码成功执行后，控制台会输出以下结果：

那么在实际项目中，toRefs 函数有什么用呢?当从 setup 函数返回响应式对象时，toRefs 非常有用，这样组件就可以在不丢失响应性的情况下对返回的对象进行解构：