Loading... # `Object.assign() 在 Vue 3 中的响应式更新与使用方法` 例如 ``` function changeCar(){ //car = {brand: '五菱宏观',price:5} // 页面不更新 //car = reactive({brand: '五菱宏观',price:5}) // 新指排了对象，页面不显示 Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象 } ``` 1. `这种方式赋值，页面不会更新`: ``` car = { brand: '五菱宏观', price: 5 }; ``` - `原因：直接赋值会将 car 对象替换为新的对象，Vue 3 中的响应式系统无法追踪到 car 对象的变化（如果 car 是一个响应式对象）。` - `解决方法：如果需要更改 car 对象的属性，应该使用 Vue 的响应式方法或使用 Object.assign() 来修改属性` 2.`使用 reactive() 创建响应式对象（页面不更新）` ``` // 直接重新赋值一个新的对象，页面不会显示更新 car = reactive({ brand: '五菱宏观', price: 5 }); ``` - `原因：虽然 reactive() 创建了响应式对象，但重新给 car 赋新值并不会触发视图更新，因为 Vue 的响应式系统是基于对象引用的。如果你替换了 car 对象，Vue 失去了对旧对象的跟踪。` - `解决方法：应避免直接重新赋值整个响应式对象，而是通过修改对象内部属性的方式来触发更新` 3.`使用 Object.assign() 合并对象（修改属性并更新页面）` ``` // 使用 Object.assign 合并新属性，页面会更新 Object.assign(car, { brand: '五菱宏观', price: 5 }); ``` - `效果：Object.assign() 会将新对象的属性合并到原对象 car 中。由于 car 对象是响应式的，Object.assign() 会修改 car 的属性并触发页面更新` - `优点：此方法不会替换原对象，而是修改已有对象的属性，可以保证响应式系统正常工作，视图也会更新` - 类似于：Object.assign(原对象,{ xx：'追加进来的数据'} 最后修改：2025 年 04 月 29 日 © 允许规范转载 打赏 赞赏作者 赞 咱们谁跟谁，用不着～