Vue3 中使用 Proxy 的 8 个注意事项

Vue3 中使用 Proxy 的8 个注意事项（面试+工作必背）

我给你讲最实用、最容易踩坑、最常考的点，全部是 Vue3 响应式真实陷阱！

一、Proxy 代理的是对象，不是基本类型

• reactive 不能接收基本类型

constnum=reactive(100)// ❌ 无效conststr=reactive('abc')// ❌ 无效

• 基本类型必须用ref
• 因为Proxy 只能代理对象（object/array/function）

二、Proxy 是浅拷贝式代理，不改变原对象

• 代理对象 ≠ 原对象

constobj={a:1}constproxy=reactive(obj)console.log(obj===proxy)// false

• 对代理对象操作 → 原对象会变
• 对原对象操作 →代理对象不响应

永远不要混合操作！

三、解构 reactive 会丢失响应式

conststate=reactive({name:'zs'})const{name}=state// ❌ 丢失响应式

因为解构后变成基本类型，脱离 Proxy 代理。

解决方案：

const{name}=toRefs(state)

四、直接赋值 reactive 会丢失响应式

conststate=reactive({name:'zs'})state={name:'ls'}// ❌ 直接覆盖代理对象

解决方案：

• 不要整体赋值
• 改用 ref
• 用 Object.assign

五、Proxy 不监听原始值类型的内部变化

conststate=reactive({count:1,obj:{}})

• state.count = 2✅ 响应
• state.obj.a = 1✅ 响应
• 但如果是：

letx=state.count x=100// ❌ 不响应

因为基本类型是传值，不是引用。

六、 you can’t usethisinside reactive proxy properly

• Proxy 会改变this指向
• 所以在类、复杂对象里用 reactive 要小心
• 一般用ref更安全

七、Proxy 不支持IE11

Vue3 放弃 IE，就是因为 Proxy 无法被 polyfill。
这是底层限制。

八、嵌套对象是get 时才代理（懒代理）

Vue3 不是一开始就递归所有对象
而是用到才代理，这叫：
懒代理 = 性能更高

conststate=reactive({child:{name:'zs'}})

第一次访问state.child时，才会把 child 变成 reactive

面试终极答案（背这个）

问：Vue3 中使用 Proxy 有哪些注意事项？

答：

1. 只能代理对象，不能代理基本类型；
2. 代理对象不等于原对象，不要混用；
3. 解构 reactive 会丢失响应式，需用 toRefs；
4. 直接赋值 reactive 会丢失代理；
5. 基本类型解构/赋值会脱离响应式；
6. 懒代理机制：用到子对象才会递归代理；
7. 不支持 IE11；
8. 会影响 this 指向。

超级记忆口诀

代理只认对象不认值
解构赋值要小心
原对象不等代理体
懒代理高性能
IE 不支持要牢记