解释 Vue 3 源码中 `isProxy`, `isReactive`, `isRef` 等类型检查工具函数的实现，以及它们在框架内部的作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

早上好，各位！今天咱们来扒一扒 Vue 3 源码里那些“验明正身”的小家伙们——isProxy, isReactive, isRef 等类型检查工具函数。别看它们名字平平无奇，但在 Vue 3 内部可是身兼要职，负责判断一个变量到底是不是被“施了魔法”的响应式对象，或者是不是被包装过的 Ref 对象。

咱们不搞那些高深的理论，直接撸代码，看看这些工具函数到底是怎么实现的，又在框架里扮演了什么角色。

一、认识“犯罪现场”：reactive、ref 和 proxy

在深入类型检查之前，咱们先简单回顾一下 Vue 3 响应式系统的几个关键概念，它们是这些类型检查函数要识别的“嫌疑人”。

reactive: 将一个普通 JavaScript 对象转换成响应式对象。对这个对象的任何修改，都会触发 Vue 组件的更新。
```
import { reactive } from 'vue';

const state = reactive({
    count: 0
});

state.count++; // 触发组件更新
```
ref: 创建一个包含响应式值的“引用”。可以用来包装原始类型的值（例如数字、字符串、布尔值），也可以用来包装对象。
```
import { ref } from 'vue';

const count = ref(0);

count.value++; // 触发组件更新
```
proxy: Vue 3 的响应式系统底层依赖于 JavaScript 的 Proxy 对象。Proxy 允许我们拦截对象的操作，例如读取、设置属性等。Vue 3 利用 Proxy 来追踪依赖，并在数据发生变化时通知相关的组件。

有了这些基础，咱们就可以开始追踪这些类型检查函数的源码了。

二、 isProxy：鉴别真假“代理人”

isProxy 函数的作用是判断一个对象是否是 Proxy 对象，更具体地说，是 Vue 3 响应式系统创建的 Proxy 对象。

源码剖析：

// packages/vue/src/reactive.ts

export function isProxy(value: unknown): boolean {
  return isReactive(value) || isReadonly(value)
}

这个实现相当简洁，它实际上依赖于 isReactive 和 isReadonly 函数。这意味着，如果一个对象是响应式的或者只读的，那么它就被认为是 Proxy 对象。

内部机制：

isProxy 函数实际上并没有直接检查对象是否是 Proxy 的实例。这是因为 JavaScript 无法直接判断一个对象是否是通过 Proxy 创建的。所以 Vue 3 采取了一个更巧妙的方法：通过检查对象是否具有特定的标记来判断它是否是响应式对象或者只读对象。

作用：

isProxy 函数在 Vue 3 内部用于判断一个对象是否已经被代理，从而避免重复代理。例如，在处理嵌套对象时，Vue 3 会先检查子对象是否已经被代理，如果已经被代理，则不再重复代理。

三、 isReactive：识别“响应式”身份

isReactive 函数用于判断一个对象是否是响应式对象，也就是通过 reactive 函数创建的对象。

源码剖析：

// packages/vue/src/reactive.ts

import { ReactiveFlags, toRaw } from './reactive'

export function isReactive(value: unknown): boolean {
  if (!isObject(value)) {
    return false
  }
  return !!(value as any)[ReactiveFlags.IS_REACTIVE]
}

内部机制：

类型检查： 首先，isReactive 函数会检查传入的值是否是一个对象。如果不是对象，直接返回 false。
标记检查： 如果是对象，isReactive 函数会检查对象是否具有 ReactiveFlags.IS_REACTIVE 属性。这个属性是在创建响应式对象时添加的，用于标记该对象是响应式的。
```
// packages/vue/src/reactive.ts

export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  IS_SHALLOW = '__v_isShallow',
  RAW = '__v_raw'
}
```
Vue 3 使用 Symbol 作为这些标记的键，以避免与用户自定义的属性冲突。
双重否定： 使用 !! 将属性值转换为布尔值。如果对象具有 ReactiveFlags.IS_REACTIVE 属性，则返回 true，否则返回 false。

作用：

isReactive 函数在 Vue 3 内部被广泛使用，用于判断一个对象是否是响应式的。例如，在 watch 函数中，Vue 3 会先检查被监听的对象是否是响应式的，如果不是，则会将其转换为响应式对象。

四、 isReadonly：辨别“只读”属性

isReadonly 函数用于判断一个对象是否是只读对象，也就是通过 readonly 函数创建的对象。

源码剖析：

// packages/vue/src/reactive.ts

export function isReadonly(value: unknown): boolean {
  return !!(value as any)[ReactiveFlags.IS_READONLY]
}

内部机制：

isReadonly 函数的实现与 isReactive 函数非常相似，它也是通过检查对象是否具有特定的标记来判断它是否是只读对象。

readonly 函数在创建只读对象时，会给对象添加 ReactiveFlags.IS_READONLY 属性，用于标记该对象是只读的。

作用：

isReadonly 函数在 Vue 3 内部用于判断一个对象是否是只读的，从而避免对只读对象进行修改。例如，在组件的 props 中，Vue 3 会将 props 对象设置为只读的，以防止组件意外修改父组件的数据。

五、 isRef：确认“引用”身份

isRef 函数用于判断一个值是否是 Ref 对象，也就是通过 ref 函数或者 computed 函数创建的对象。

源码剖析：

// packages/vue/src/ref.ts

import { Ref } from './ref'

export function isRef<T>(r: any): r is Ref<T> {
  return !!(r && r.__v_isRef === true)
}

内部机制：

类型检查： isRef 函数首先检查传入的值是否是一个对象。如果不是对象，直接返回 false。
标记检查： 如果是对象，isRef 函数会检查对象是否具有 __v_isRef 属性，并且该属性的值是否为 true。这个属性是在创建 Ref 对象时添加的，用于标记该对象是 Ref 对象。

作用：

isRef 函数在 Vue 3 内部用于判断一个值是否是 Ref 对象。例如，在 watch 函数中，Vue 3 会先检查被监听的值是否是 Ref 对象，如果是，则会监听 Ref 对象的 value 属性。

六、 unref：揭开“引用”的神秘面纱

unref 函数用于返回 Ref 对象的原始值。如果传入的值不是 Ref 对象，则直接返回该值。

源码剖析：

// packages/vue/src/ref.ts

import { isRef, Ref } from './ref'

export function unref<T>(ref: T | Ref<T>): T {
  return isRef(ref) ? ref.value : ref
}

内部机制：

类型检查： unref 函数首先使用 isRef 函数判断传入的值是否是 Ref 对象。
返回原始值： 如果是 Ref 对象，则返回 Ref 对象的 value 属性，也就是 Ref 对象包装的原始值。如果不是 Ref 对象，则直接返回传入的值。

作用：

unref 函数在 Vue 3 内部用于获取 Ref 对象的原始值。例如，在模板中，Vue 3 会自动解包 Ref 对象，并将 Ref 对象的 value 属性渲染到页面上。在 JavaScript 代码中，可以使用 unref 函数手动解包 Ref 对象。

七、 toRaw：返璞归真，还原原始对象

toRaw 函数用于返回响应式对象的原始对象，也就是取消响应式代理。

源码剖析：

// packages/vue/src/reactive.ts

export function toRaw<T>(observed: T): T {
  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
  return raw ? raw : observed
}

内部机制：

属性检查： toRaw 函数检查对象是否具有 ReactiveFlags.RAW 属性。这个属性是在创建响应式对象时添加的，用于存储原始对象。
返回原始对象： 如果对象具有 ReactiveFlags.RAW 属性，则返回该属性的值，也就是原始对象。否则，直接返回传入的对象。

作用：

toRaw 函数在 Vue 3 内部用于获取响应式对象的原始对象。例如，在某些情况下，我们需要对原始对象进行操作，而不是对响应式对象进行操作。这时，可以使用 toRaw 函数获取原始对象。

八、总结：类型检查工具函数大盘点

为了方便大家理解，我把这些类型检查工具函数的作用整理成一个表格：

函数名	作用	内部机制	典型应用场景
`isProxy`	判断一个对象是否是 `Proxy` 对象 (响应式对象或只读对象)	检查对象是否具有 `ReactiveFlags.IS_REACTIVE` 或 `ReactiveFlags.IS_READONLY` 属性。	避免重复代理，例如在处理嵌套对象时，先检查子对象是否已经被代理。
`isReactive`	判断一个对象是否是响应式对象 (通过 `reactive` 创建)	检查对象是否具有 `ReactiveFlags.IS_REACTIVE` 属性。	`watch` 函数中，检查被监听的对象是否是响应式的。
`isReadonly`	判断一个对象是否是只读对象 (通过 `readonly` 创建)	检查对象是否具有 `ReactiveFlags.IS_READONLY` 属性。	组件的 `props` 中，将 `props` 对象设置为只读的。
`isRef`	判断一个值是否是 `Ref` 对象 (通过 `ref` 或 `computed` 创建)	检查对象是否具有 `__v_isRef` 属性，并且该属性的值是否为 `true`。	`watch` 函数中，检查被监听的值是否是 `Ref` 对象。
`unref`	返回 `Ref` 对象的原始值。如果传入的值不是 `Ref` 对象，则直接返回该值。	使用 `isRef` 判断是否是 `Ref` 对象，如果是，则返回 `Ref` 对象的 `value` 属性，否则返回传入的值。	模板中自动解包 `Ref` 对象，JavaScript 代码中手动解包 `Ref` 对象。
`toRaw`	返回响应式对象的原始对象，也就是取消响应式代理。	检查对象是否具有 `ReactiveFlags.RAW` 属性，如果是，则返回该属性的值，否则直接返回传入的对象。	需要对原始对象进行操作时，可以使用 `toRaw` 函数获取原始对象。

九、总结陈词：

这些类型检查工具函数虽然看起来不起眼，但它们是 Vue 3 响应式系统的重要组成部分。它们帮助 Vue 3 准确地识别响应式对象、只读对象和 Ref 对象，从而保证了响应式系统的正常运行。理解这些工具函数的实现，可以帮助我们更好地理解 Vue 3 响应式系统的内部机制，从而更好地使用 Vue 3。

好了，今天的讲座就到这里。希望大家有所收获！下次有机会再和大家一起深入 Vue 3 的源码，挖掘更多有趣的细节。各位，下课！

发表回复 取消回复

发表回复取消回复