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

Vue3 中使用 Proxy 的8 个注意事项面试工作必背我给你讲最实用、最容易踩坑、最常考的点全部是 Vue3 响应式真实陷阱一、Proxy 代理的是对象不是基本类型reactive 不能接收基本类型constnumreactive(100)// ❌ 无效conststrreactive(abc)// ❌ 无效基本类型必须用ref因为Proxy 只能代理对象object/array/function二、Proxy 是浅拷贝式代理不改变原对象代理对象 ≠ 原对象constobj{a:1}constproxyreactive(obj)console.log(objproxy)// false对代理对象操作 → 原对象会变对原对象操作 →代理对象不响应永远不要混合操作三、解构 reactive 会丢失响应式conststatereactive({name:zs})const{name}state// ❌ 丢失响应式因为解构后变成基本类型脱离 Proxy 代理。解决方案const{name}toRefs(state)四、直接赋值 reactive 会丢失响应式conststatereactive({name:zs})state{name:ls}// ❌ 直接覆盖代理对象解决方案不要整体赋值改用 ref用 Object.assign五、Proxy 不监听原始值类型的内部变化conststatereactive({count:1,obj:{}})state.count 2✅ 响应state.obj.a 1✅ 响应但如果是letxstate.count x100// ❌ 不响应因为基本类型是传值不是引用。六、 you can’t usethisinside reactive proxy properlyProxy 会改变this指向所以在类、复杂对象里用 reactive 要小心一般用ref更安全七、Proxy 不支持IE11Vue3 放弃 IE就是因为 Proxy 无法被 polyfill。这是底层限制。八、嵌套对象是get 时才代理懒代理Vue3 不是一开始就递归所有对象而是用到才代理这叫懒代理 性能更高conststatereactive({child:{name:zs}})第一次访问state.child时才会把 child 变成 reactive面试终极答案背这个问Vue3 中使用 Proxy 有哪些注意事项答只能代理对象不能代理基本类型代理对象不等于原对象不要混用解构 reactive 会丢失响应式需用 toRefs直接赋值 reactive 会丢失代理基本类型解构/赋值会脱离响应式懒代理机制用到子对象才会递归代理不支持 IE11会影响 this 指向。超级记忆口诀代理只认对象不认值解构赋值要小心原对象不等代理体懒代理高性能IE 不支持要牢记