Vue 3源码极客之：`Vue`的`unref`和`isRef`：它们在`Ref`操作中的内部实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是你们今天的代码解剖师。今天咱们聊聊 Vue 3 源码里的两个小可爱：unref 和 isRef。别看名字不起眼，它们可是 Ref 操作中的重要角色，理解它们能让我们更深入地掌握 Vue 3 的响应式系统。咱们用“庖丁解牛”的方式，一层层扒开它们的面纱，看看它们到底是怎么工作的。

第一部分：Ref 是个啥？（快速回顾）

在正式开始之前，咱们先快速回顾一下 Ref 是个啥。简单来说，Ref 是 Vue 3 响应式系统中的一个基本单元，它的主要作用是：

包裹普通变量： 让普通变量也能具有响应式能力，当变量的值发生改变时，依赖于它的视图会自动更新。
提供访问接口： 通过 .value 属性来访问和修改 Ref 内部的值。

举个例子：

import { ref } from 'vue';

const count = ref(0); // count 现在是一个 Ref 对象

console.log(count.value); // 输出: 0

count.value++; // 修改 Ref 的值

console.log(count.value); // 输出: 1

OK，有了 Ref 的基本概念，咱们就可以开始今天的正题了。

第二部分：isRef：你是 Ref 吗？

isRef 函数的功能很简单：判断一个值是不是一个 Ref 对象。它的源码实现也很直接：

// 假设是 Vue 源码中的 isRef 实现 (简化版)
function isRef(value: any): value is Ref {
  return !!(value && value.__v_isRef);
}

是不是简洁到令人发指？

value: any: 接受任何类型的值作为参数。
value is Ref: 这是一个 TypeScript 类型谓词，表示如果 isRef 函数返回 true，那么 TypeScript 就会将 value 的类型推断为 Ref 类型。这在类型检查时非常有用。
value && value.__v_isRef: 这是判断的关键。它首先检查 value 是否存在 (防止 null 或 undefined 报错)，然后检查 value 是否有一个名为 __v_isRef 的属性。如果这两个条件都满足，那么就认为 value 是一个 Ref 对象。
!!(...): 将结果转换为布尔值。

为什么要有 __v_isRef 这个属性呢？

这其实是一种类型标记（Type Tagging）的技巧。Vue 内部在创建 Ref 对象的时候，会给它添加一个 __v_isRef 属性，并将其设置为 true。这样，isRef 函数就可以通过检查这个属性来快速判断一个值是不是 Ref 对象，而不需要进行复杂的类型判断。

例子时间：

import { ref, isRef } from 'vue';

const count = ref(0);
const normalValue = 10;

console.log(isRef(count));       // 输出: true
console.log(isRef(normalValue)); // 输出: false
console.log(isRef({ value: 1 })); // 输出: false (即使有 value 属性，但没有 __v_isRef)

总结一下：

函数名	功能描述	核心实现	依赖属性
`isRef`	判断一个值是否为 `Ref` 对象。	检查是否存在 `__v_isRef` 属性且为 `true`	`__v_isRef`

第三部分：unref：解开 Ref 的封印

unref 函数的作用是：如果传入的值是一个 Ref 对象，则返回它的内部值（即 .value 属性的值）；如果传入的值不是一个 Ref 对象，则直接返回该值。

源码实现：

// 假设是 Vue 源码中的 unref 实现 (简化版)
function unref<T>(ref: T | Ref<T>): T {
  return isRef(ref) ? ref.value : ref;
}

ref: T | Ref<T>: 接受一个类型为 T 或 Ref<T> 的参数。这意味着它可以接受一个普通值，也可以接受一个 Ref 对象。
isRef(ref) ? ref.value : ref: 使用三元运算符进行判断。如果 ref 是一个 Ref 对象，则返回 ref.value；否则，直接返回 ref。

unref 的应用场景

unref 函数在很多场景下都非常有用，特别是当你需要处理可能为 Ref 或普通值的变量时。

简化代码： 避免每次都手动检查变量是否为 Ref。

import { ref, unref } from 'vue';

const count = ref(0);
const normalValue = 10;

function printValue(value: number | Ref<number>) {
  const unwrappedValue = unref(value); // 使用 unref 解开 Ref 的封印
  console.log(unwrappedValue);
}

printValue(count);       // 输出: 0
printValue(normalValue); // 输出: 10

如果没有 unref，你需要这样写：

function printValue(value: number | Ref<number>) {
  const unwrappedValue = isRef(value) ? value.value : value;
  console.log(unwrappedValue);
}

看到了吗？unref 让代码更简洁。

在计算属性中使用： 当计算属性依赖于 Ref 时，可以使用 unref 来获取 Ref 的值。

import { ref, computed, unref } from 'vue';

const count = ref(0);

const doubledCount = computed(() => {
  return unref(count) * 2; // 使用 unref 获取 count 的值
});

console.log(doubledCount.value); // 输出: 0

count.value = 5;

console.log(doubledCount.value); // 输出: 10

虽然在计算属性内部，Vue 会自动解包 Ref，但使用 unref 可以让代码更明确，更容易理解。

处理组件 props： 在组件内部，props 可能是 Ref，也可能是普通值。使用 unref 可以统一处理。

<template>
  <div>
    <p>Count: {{ unwrappedCount }}</p>
  </div>
</template>

<script>
import { defineComponent, unref, toRef } from 'vue';

export default defineComponent({
  props: {
    count: {
      type: [Number, Object], // 允许 Number 或 Ref<Number>
      required: true
    }
  },
  setup(props) {
    const unwrappedCount = unref(props.count); // 使用 unref 获取 count 的值
    // 如果 count 是 ref，unwrappedCount 会自动更新。但是如果 count 是 number 不会更新
    // 可以使用 toRef 创建一个响应式的 props 对象

    return {
      unwrappedCount
    };
  }
});
</script>

在这个例子中，props.count 可能是 number 也可能是 Ref<number>。使用 unref(props.count) 可以确保我们总是能拿到它的值。需要注意的是，如果 props.count 本身不是 ref，那么 unwrappedCount 就不会响应式更新。如果需要响应式更新，需要使用 toRef 或 toRefs 来创建响应式 props。

例子时间：

import { ref, unref } from 'vue';

const count = ref(0);
const normalValue = 10;

console.log(unref(count));       // 输出: 0
console.log(unref(normalValue)); // 输出: 10

总结一下：

函数名	功能描述	核心实现	依赖函数	应用场景
`unref`	如果参数是一个 `Ref` 对象，则返回其内部值（`value` 属性）；否则，直接返回参数本身。它的目的是为了方便在处理可能为 `Ref` 或普通值的变量时，避免每次都手动检查变量是否为 `Ref`。	`isRef(ref) ? ref.value : ref`	`isRef`	简化代码，计算属性中使用，处理组件 props。总而言之，就是需要统一处理 Ref 和普通值的场景。

第四部分：unref 和 isRef 的配合

unref 和 isRef 经常一起使用，它们是好基友，黄金搭档。 isRef 负责判断，unref 负责解包。

举个例子：

import { ref, isRef, unref } from 'vue';

function processValue(value: any) {
  if (isRef(value)) {
    console.log('This is a Ref, value:', unref(value));
  } else {
    console.log('This is a normal value:', value);
  }
}

const count = ref(0);
const normalValue = 10;

processValue(count);       // 输出: This is a Ref, value: 0
processValue(normalValue); // 输出: This is a normal value: 10

在这个例子中，processValue 函数使用 isRef 判断传入的值是否为 Ref，如果是，则使用 unref 获取其内部值。

第五部分：真实案例：Vue 源码中的应用

虽然我们无法直接看到 Vue 源码的所有细节（因为它是经过编译和优化的），但我们可以通过阅读 Vue 的类型定义文件（.d.ts）和一些相关的源码片段，来了解 unref 和 isRef 在 Vue 内部的使用情况。

例如，在处理组件的 props 时，Vue 内部会使用 unref 来获取 props 的值，以确保能够正确处理 Ref 类型的 props。

此外，在一些响应式工具函数中，例如 watch 和 computed，Vue 也会使用 unref 来获取依赖的值，以确保能够正确追踪依赖的变化。

第六部分：总结

今天咱们一起探索了 Vue 3 源码中的 unref 和 isRef 函数。它们虽然简单，但却在 Vue 的响应式系统中扮演着重要的角色。

isRef: 用于判断一个值是否为 Ref 对象。
unref: 用于获取 Ref 对象的内部值，如果不是 Ref 对象，则直接返回该值。

理解这两个函数，可以帮助我们更好地理解 Vue 3 的响应式系统，并编写更简洁、更高效的 Vue 代码。

希望今天的分享对你有所帮助。下次再见！

发表回复 取消回复

发表回复取消回复