Vue 2 中使用 $set 正确响应式更新数组对象属性的完整解决方案-js教程-PHP中文网

Vue 2 中使用 $set 正确响应式更新数组对象属性的完整解决方案

在 Vue 2 中直接修改数组内对象的属性（如 item.price = ...）不会触发视图更新，需用 this.$set 显式声明响应式变更；本文详解如何精准定位并更新嵌套对象，确保模板实时同步。

在 vue 2 中直接修改数组内对象的属性（如 `item.price = ...`）不会触发视图更新，需用 `this.$set` 显式声明响应式变更；本文详解如何精准定位并更新嵌套对象，确保模板实时同步。

Vue 2 的响应式系统对数组的监听存在限制：它无法检测通过索引直接设置元素（如 arr[0] = newVal）或直接修改对象属性（如 obj.prop = newVal）——即使该对象本身是响应式的。你遇到的问题正是典型场景：this.details.forEach(...) 中对 item.price 的赋值虽改变了数据，但 Vue 并未追踪到该变化，因此模板不会立即更新；只有当触发其他响应式依赖（如点击页面其他区域导致重新渲染）时，才“被动”显示新值。

关键在于：必须使用 this.$set 显式通知 Vue 数据发生了变更，且要作用于响应式数据的“正确层级”。

你尝试的 this.$set(item, "price", ...) 之所以无效，是因为 item 是普通 JavaScript 对象（非 Vue 实例），$set 在此上下文中不生效；而 this.$set(this.details, index, ...) 若传入全新对象，会替换整个数组项，可能意外丢失其他响应式属性（如 item.id、item.name 等），破坏响应式链。

vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

网站特效

网站源码

网站素材

前端模板