vue2用object.defineproperty劫持属性，无法监听新增/删除属性及数组索引变化；vue3用proxy代理整个对象，支持全场景监听、惰性响应式、无需$set/$delete。
处理复杂响应式数据清理，关键不在“删得快”，而在“删得准、不破响应性、不漏副作用”。Vue 2 和 Vue 3 底层机制不同，Pinia 和 Vuex 策略也各异，盲目赋值或 delete 很容易导致视图不更新、监听失效、内存泄漏。
清空 reactive 对象：别直接赋空对象
用 reactive({ a: 1, b: 'x' }) 创建的对象，不能写 this.form = {} —— 这会替换整个代理目标，新对象不再受响应式系统追踪。
- ✅ 推荐：用 Object.assign(target, {}) 清空原对象属性
- ✅ 或逐个重置：for (const key in target) { target[key] = initialValue[key] || null }
- ❌ 避免：
target = {}、target = ref({})（类型错配）、delete target.key（破坏 proxy 拦截）
清空 ref 包裹的数据：直接改 .value 即可
ref 是对任意值的响应式包装，内部已做代理，赋新值天然保持响应性。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章