首页vue的this.$set（）

vue的this.$set（）

时间: 2025-01-25 13:05:59 浏览: 44

### Vue.js `this.$set()` 方法使用说明 `this.$set()` 是 Vue 实例的一个方法，用于向响应式对象中添加新属性并确保这个新的属性同样是响应式的。如果直接给一个已经存在的响应式对象增加一个新的属性，则该属性不会触发视图更新；此时就需要用到 `this.$set()` 来完成这项工作[^1]。 #### 添加对象的新属性对于已有的响应式对象，可以利用 `this.$set(target, propertyName/index, value)` 向其中加入新的键值对： ```javascript let vm = new Vue({ data: { obj: {} } }); // 正确的方式设置新属性 vm.$set(vm.obj, 'newProperty', 'value'); console.log(vm.obj.newProperty); // 输出 "value" ``` 上述代码片段展示了如何在一个原本为空的对象上安全地定义了一个名为 `newProperty` 的新属性，并赋予初始值 `"value"` 。这样做的好处在于一旦修改了 `obj['newProperty']` ，所有的依赖都会得到通知并且相应地刷新DOM节点[^3]。 #### 更新数组中的元素除了操作对象外，`this.$set()` 还适用于改变数组里的特定项而不丢失其反应特性： ```javascript var items = ['a', 'b']; items[0] = 'c'; // 不推荐的做法，因为这会绕过Vue的变更检测机制 // 推荐做法如下所示： vm.$set(items, 0, 'd'); // 更改第一个位置上的元素为'd' ``` 这里强调了一种更优的方法来替换数组内指定索引处的内容——即调用 `$set(array, index, newValue)` 函数而不是简单地重写数组成员。这样做能够保证任何监听此数组变动的地方都能及时作出回应[^4]。

阅读全文