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 usethisinside 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 不支持要牢记

到此这篇关于Vue3中使用 Proxy 的8个注意事项的文章就介绍到这了,更多相关Vue3 使用 Prox内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论