各位靓仔靓女们，晚上好！今天咱们来聊聊 Vue 3 源码里那些个“照妖镜”—— isProxy, isReactive, isRef 这些类型检查工具函数。 别看它们名字平平无奇，但作用可大了，Vue 内部很多地方都靠它们来辨别“妖魔鬼怪”，哦不，是辨别各种响应式对象，从而进行不同的处理。
开场白：响应式世界的侦探
想象一下，在一个充满了代理（Proxy）、响应式对象（Reactive）、Ref 对象的世界里，你是一个侦探，需要迅速分辨出你面前的对象到底属于哪一类。这些 isProxy, isReactive, isRef 就是你的侦探工具，可以帮你快速锁定目标。
第一幕：isProxy —— 代理的身份认证
isProxy 的作用很直接，就是判断一个对象是否是 Vue 3 使用 Proxy 创建的代理对象。它的实现很简单，但却至关重要。
// packages/reactivity/src/reactive.ts
import { ReactiveFlags, Target } from './reactive';
export function isProxy(value: unknown): boolean {
return isReactive(value) || isReadonly(value);
}
export function isReactive(value: unknown): boolean {
if (!isObject(value)) {
return false
}
return !!(value as Target)[ReactiveFlags.IS_REACTIVE]
}
export function isReadonly(value: unknown): boolean {
return !!(value as Target)[ReactiveFlags.IS_READONLY]
}看到没？isProxy 实际上是依赖于 isReactive 和 isReadonly 来实现的。也就是说，只要一个对象是响应式的或者只读的，那它就是个 Proxy。
ReactiveFlags 是什么鬼？
注意到了那个 ReactiveFlags.IS_REACTIVE 没？ 这玩意儿是个关键。它是一个枚举类型，定义了一些特殊的 Symbol 属性，会被添加到 Proxy 对象上，用来标记 Proxy 的类型。
// packages/reactivity/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',
REACTIVE = '__v_reactive',
READONLY = '__v_readonly',
SHALLOW_REACTIVE = '__v_shallowReactive',
SHALLOW_READONLY = '__v_shallowReadonly'
}
export type Target = Record<any, any>当我们使用 reactive() 或 readonly() 创建代理对象时，Vue 会偷偷地给这个对象添加一个 __v_isReactive 或 __v_isReadonly 属性，值为 true。 isReactive 和 isReadonly 函数就是通过检查这些属性来判断对象是否是响应式或只读的。
举个栗子：
import { reactive, readonly, isProxy, isReactive, isReadonly } from 'vue';
const original = { name: '张三', age: 18 };
const reactiveObj = reactive(original);
const readonlyObj = readonly(original);
console.log('reactiveObj isProxy:', isProxy(reactiveObj)); // true
console.log('reactiveObj isReactive:', isReactive(reactiveObj)); // true
console.log('reactiveObj isReadonly:', isReadonly(reactiveObj)); // false
console.log('readonlyObj isProxy:', isProxy(readonlyObj)); // true
console.log('readonlyObj isReactive:', isReactive(readonlyObj)); // false
console.log('readonlyObj isReadonly:', isReadonly(readonlyObj)); // true
console.log('original isProxy:', isProxy(original)); // false
console.log('original isReactive:', isReactive(original)); // false
console.log('original isReadonly:', isReadonly(original)); // false这个例子很清晰地展示了 isProxy, isReactive, isReadonly 的用法。 只有经过 reactive() 或 readonly() 处理过的对象，才能通过这些“照妖镜”的检测。
第二幕：isReactive —— 响应式对象的验明正身
isReactive 的作用是判断一个对象是否是响应式的。注意，它不仅仅是判断是否是 Proxy，而是判断是否是可变的响应式 Proxy。 readonly() 创建的只读 Proxy 也能通过 isProxy 检测，但过不了 isReactive 这一关。
咱们再看一眼 isReactive 的源码：
// packages/reactivity/src/reactive.ts
export function isReactive(value: unknown): boolean {
if (!isObject(value)) {
return false
}
return !!(value as Target)[ReactiveFlags.IS_REACTIVE]
}关键仍然是那个 ReactiveFlags.IS_REACTIVE。 只有当一个对象拥有这个属性，并且值为 true，才能被认为是响应式的。
为什么要做这个区分？
因为 Vue 3 内部需要区分可变响应式对象和只读响应式对象，以便进行不同的更新策略和优化。 比如，对于只读对象，Vue 就不会监听其属性的变化，从而减少不必要的计算。
第三幕：isReadonly —— 只读对象的认证
isReadonly 的作用是判断一个对象是否是只读的。 和 isReactive 类似，它也是通过检查 ReactiveFlags.IS_READONLY 属性来判断的。
// packages/reactivity/src/reactive.ts
export function isReadonly(value: unknown): boolean {
return !!(value as Target)[ReactiveFlags.IS_READONLY]
}只读对象有什么用？
只读对象可以防止意外的修改，提高代码的健壮性。 在大型项目中，只读对象可以作为数据访问的屏障，避免子组件意外地修改父组件的数据，从而导致状态混乱。
第四幕：isRef —— Ref 对象的识别
isRef 的作用是判断一个对象是否是 Ref 对象。 Ref 对象是 Vue 3 中用来包装基本类型值的响应式对象。
// packages/reactivity/src/ref.ts
import { ReactiveEffect } from './effect'
import { isFunction, hasChanged, isObject } from '@vue/shared'
import { track, trigger } from './effect'
import { toReactive } from './reactive'
import { TrackOpTypes, TriggerOpTypes } from './operations'
export interface Ref<T = any> {
value: T
/**
* Type differentiator only.
* We need this to be in jsdoc but not in d.ts because once this is in
* d.ts, it would break type inference test cases that rely on TS's
* structural typing of interfaces.
*/
/**
* @internal
*/
readonly __v_isRef: true
}
export function isRef<T>(r: any): r is Ref<T> {
return !!(r && r.__v_isRef)
}和 isReactive、isReadonly 类似，isRef 也是通过检查一个特殊的属性 __v_isRef 来判断的。 Ref 对象在创建时会被添加这个属性，值为 true。
Ref 对象的重要性
Ref 对象是 Vue 3 响应式系统的基石之一。 它允许我们将基本类型值（如数字、字符串、布尔值）变成响应式的，从而可以在模板中直接使用。
举个栗子：
import { ref, isRef } from 'vue';
const count = ref(0);
console.log('count isRef:', isRef(count)); // true
console.log('count.value:', count.value); // 0
count.value++;
console.log('count.value:', count.value); // 1在这个例子中，count 是一个 Ref 对象，我们可以通过 count.value 来访问和修改它的值。 当 count.value 发生变化时，依赖于 count 的组件会自动更新。
第五幕：isShallow 和 isShallowReadonly
除了上面提到的几个，Vue 3 还有 isShallow 和 isShallowReadonly 两个函数。 它们用于判断一个对象是否是浅层响应式或浅层只读的。 浅层响应式/只读意味着只有对象的第一层属性是响应式/只读的，而更深层的属性则不是。
// packages/reactivity/src/reactive.ts
export function isShallow(value: unknown): boolean {
return !!(value as Target)[ReactiveFlags.IS_SHALLOW]
}// packages/reactivity/src/reactive.ts
export function isShallowReadonly(value: unknown): boolean {
return !!(value as Target)[ReactiveFlags.SHALLOW_READONLY]
}同样是通过检查特定的 ReactiveFlags 属性来判断的。
浅层响应式/只读的应用场景
浅层响应式/只读通常用于性能优化。 当一个对象只有第一层属性需要响应式更新时，使用浅层响应式可以避免不必要的深度监听，从而提高性能。
总结：类型检查工具函数的意义
isProxy, isReactive, isRef, isReadonly, isShallow, isShallowReadonly 这些类型检查工具函数在 Vue 3 内部被广泛使用，它们的主要作用包括：
- 类型安全： 确保代码在处理响应式对象时类型正确，避免潜在的错误。
- 优化： 根据对象的类型，采取不同的优化策略，例如，对于只读对象，可以跳过不必要的更新。
- 内部逻辑： 在 Vue 3 的核心逻辑中，这些函数被用来判断对象的类型，从而执行不同的处理流程。 比如，在
watch函数中，会根据被监听的对象是否是 Ref 对象，来决定如何收集依赖。 - 调试： 这些工具函数在开发调试过程中也很有用，可以帮助开发者快速判断一个对象是否是响应式的，从而定位问题。
表格总结
| 函数名 | 作用 | 依赖的 ReactiveFlags 属性 |
|---|---|---|
isProxy |
判断是否是 Proxy 对象 | IS_REACTIVE 或 IS_READONLY |
isReactive |
判断是否是可变的响应式对象 | IS_REACTIVE |
isReadonly |
判断是否是只读的响应式对象 | IS_READONLY |
isRef |
判断是否是 Ref 对象 | __v_isRef |
isShallow |
判断是否是浅层响应式对象 | IS_SHALLOW |
isShallowReadonly |
判断是否是浅层只读的响应式对象 | SHALLOW_READONLY |
结语：侦探的修炼之路
掌握了这些“照妖镜”，你就可以在 Vue 3 的响应式世界里自由穿梭，辨别各种对象，更好地理解 Vue 3 的内部机制，写出更高效、更健壮的代码。
希望今天的讲座对大家有所帮助！下次有机会再和大家分享 Vue 3 源码的更多精彩内容。