Contents

一、isProxy

检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理

  • 基本使用
1const original = { foo: 'bar' };
2const reactiveObj = reactive(original);
3
4console.log(isProxy(original)); // false
5console.log(isProxy(reactiveObj)); // true

 

  • 实现原理 (packages/reactivity/src/reactive.ts)

如果 value 为真(即非 null 或 undefined),则检查它是否有 __v_raw 属性。该属性在 Vue.js 的内部实现中用于存储原始对象的引用

如果存在 __v_raw 属性,则说明该对象是一个代理对象,函数返回 true;否则返回 false

1export enum ReactiveFlags {
2  SKIP = '__v_skip',
3  IS_REACTIVE = '__v_isReactive',
4  IS_READONLY = '__v_isReadonly',
5  IS_SHALLOW = '__v_isShallow',
6  RAW = '__v_raw',
7}
8
9/**
10 * Checks if an object is a proxy created by {@link reactive},
11 * {@link readonly}, {@link shallowReactive} or {@link shallowReadonly()}.
12 *
13 * @param value - The value to check.
14 * @see {@link https://vuejs.org/api/reactivity-utilities.html#isproxy}
15 */
16export function isProxy(value: any): boolean {
17  return value ? !!value[ReactiveFlags.RAW] : false
18}

 

二、其他

学习的记录,仅供参考