isProxy 用于判断对象是否为 Vue 创建的响应式代理,对 reactive/readonly 返回 true,对 ref/computed/普通对象/手动 Proxy 等返回 false,且不递归检测嵌套属性。

isProxy 是 Vue 3 提供的一个工具函数,用于判断一个对象是否是由 reactive、readonly(或 shallowReactive、shallowReadonly)创建的代理对象。
基本用法
它接受一个参数(任意值),返回布尔值:
- 如果是通过
reactive、readonly等创建的响应式代理,返回true; - 如果是普通对象、原始值、
ref、computed或非 Vue 创建的 Proxy,返回false。
注意:ref 和 computed 不是 proxy
ref 返回的是一个带 .value 的响应式对象,但它本身不是 Proxy,而是基于 Object.defineProperty(或内部封装的 getter/setter)实现的,所以:
React 与 Next.js 性能优化指南,源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
import { ref, reactive, isProxy } from 'vue'
const r = ref(1)
const obj = reactive({ a: 1 })
const ro = readonly({ b: 2 })
console.log(isProxy(r)) // false
console.log(isProxy(obj)) // true
console.log(isProxy(ro)) // true
console.log(isProxy({})) // false
不能用于检测嵌套对象是否被代理
isProxy 只检测目标对象本身是否为 Vue 创建的代理,不递归检查其属性。例如:
立即学习“前端免费学习笔记(深入)”;
const state = reactive({
user: { name: 'Alice' } // 普通对象,未被 reactive 包裹
})
console.log(isProxy(state)) // true
console.log(isProxy(state.user)) // false —— 即使在 reactive 内部,它仍是原生对象
如需让 user 也响应式,需显式用 reactive 包裹:user: reactive({ name: 'Alice' }),此时 isProxy(state.user) 才为 true。
常见误判场景
-
自己手动 new Proxy 的对象:返回
false,因为isProxy内部使用Proxy.revocable或特定标识检测,只认 Vue 自己创建的代理; -
解构后的响应式对象:解构会丢失响应性,得到的是普通值,
isProxy返回false; -
toRaw() 后的对象:返回
false,因为toRaw返回的是原始 target,不再是代理。

















