vue.$set和vm.$set有什么区别
时间: 2023-11-22 16:48:49 浏览: 319
根据提供的引用内容,可以得知`Vue.set()`和`vm.$set()`都可以用来向Vue实例中的响应式对象添加属性并触发视图更新。它们的区别在于`Vue.set()`可以用于全局对象,而`vm.$set()`只能用于当前实例。具体来说,`Vue.set()`的语法为`Vue.set(target, key, value)`,而`vm.$set()`的语法为`vm.$set(target, key, value)`。其中,`target`是要添加属性的对象,`key`是属性名,`value`是属性值。
举个例子,假设我们有一个Vue实例`vm`,其中有一个响应式对象`list`,我们想要向`list`中添加一个新属性`newProp`,可以使用以下两种方法:
```javascript
// 使用Vue.set()
Vue.set(vm.list, 'newProp', 'new value');
// 使用vm.$set()
vm.$set(vm.list, 'newProp', 'new value');
```
这两种方法的效果是一样的,都会向`list`中添加一个新属性`newProp`并触发视图更新。
相关问题
vue 中什么方法可以向嵌套对象添加响应式 property? 多选题3.0分 Vue.set vm.$set (this.$set) C Vue.add D vm.Sadd (this.$add)
在 Vue 中,可以使用以下方法向嵌套对象添加响应式属性:
- `Vue.set()`:可用于在 Vue 实例或嵌套对象中添加响应式属性。
- `vm.$set()` 或 `this.$set()`:实例方法,可用于在 Vue 实例或嵌套对象中添加响应式属性。
因此,选项 A 和 B 都是正确的。而选项 C 和 D 中的方法在 Vue 中并不存在。
vue.$set的使用
### Vue.js 中 `vm.$set` 方法详解
#### 什么是 `$set`
在 Vue.js 中,当需要向响应式对象中添加新的属性并确保该属性也具备响应性时,可以使用 `vm.$set` 方法。此方法不仅能够更新数据模型中的特定部分,还能通知 Vue 实例进行视图的相应刷新操作[^1]。
#### 如何使用 `$set`
对于已存在的 Vue 实例内的数据对象,如果尝试直接给它增加一个未定义过的键值对,则这个新加入的数据项不会被纳入到框架的依赖追踪体系里;也就是说,默认情况下它是非反应性的。为了避免这种情况发生,在修改或创建这样的成员变量之前应该调用 `Vue.set(object, key, value)` 或者实例上的别名版本 `this.$set(object, key, value)` 函数来完成赋值动作[^3]。
下面是一个具体的例子说明怎样利用 `$set` 向已有对象内追加可观察的新字段:
```html
<template>
<div>
<p>Name: {{ person.name }}</p>
<!-- 初始状态下person对象并没有age属性 -->
<p v-if="person.age">Age: {{ person.age }}</p>
<button @click="addAge()">Add Age</button>
</div>
</template>
<script>
export default {
data() {
return {
person: { name: "Alice" }
};
},
methods: {
addAge() {
// 正确的方式:使用$set使得新增的age成为响应式的
this.$set(this.person, 'age', 30);
}
}
};
</script>
```
在这个案例里面,点击按钮会触发 `addAge()` 方法执行,进而通过调用 `this.$set` 将年龄信息安全地注入到了 `person` 对象之中,并且页面上也会立即反映出这一变动[^2]。
阅读全文
相关推荐

















