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

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

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

---

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

• reactive 不能接收基本类型

const num = reactive(100) // ❌ 无效
const str = reactive('abc') // ❌ 无效

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

---

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

• 代理对象 ≠ 原对象

const obj = {a:1}
const proxy = reactive(obj)

console.log(obj === proxy) // false

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

永远不要混合操作！

---

三、解构 reactive 会 丢失响应式

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

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

解决方案：

const { name } = toRefs(state)

---

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

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

解决方案：

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

---

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

const state = reactive({
  count: 1,
  obj: {}
})

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

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

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

---

六、 you can't use this inside reactive proxy properly

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

---

七、Proxy 不支持 IE11

Vue3 放弃 IE，就是因为 Proxy 无法被 polyfill。

这是底层限制。

---

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

Vue3 不是一开始就递归所有对象

而是用到才代理 ，这叫：
懒代理 = 性能更高

const state = reactive({
  child: { name: 'zs' }
})

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

---

面试终极答案（背这个）

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

答：

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

---

超级记忆口诀

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