vue2中的$set

在Vue.js2中，$set是一个实例方法，用于向响应式对象添加新的属性或修改现有属性，以确保其响应性。当你在响应式对象上添加一个属性时，Vue.js无法检测到这个变化。这时，你可以使用$set方法来手动触发响应式更新。

$set方法接受三个参数：对象、键和值。它会将键值对添加到对象中，并且确保这个新属性是响应式的。如果对象是响应式的，那么这个新属性也会是响应式的。

下面是一个示例，演示了如何使用$set方法：

在上面的例子中，我们使用$set方法将一个新属性'age'添加到user对象中。这样，'age'属性就会成为响应式的，并且在修改时会触发视图的更新。

需要注意的是，$set方法只能用于向已经是响应式的对象添加属性。如果你尝试将属性添加到非响应式的对象上，$set方法将不起作用。

相关问题

vue2 this.$set

引用\[1\]中提到了Vue.js中的响应式原理，其中涉及到了Vue.set和this.$set的关系。引用\[2\]给出了一个示例代码，展示了在Vue组件中使用this.$set的情况。在这个示例中，通过点击按钮来添加一个新的属性age到form对象中。如果直接使用this.form.age = 10来添加属性，是无法实现响应式的。而使用this.$set(this.form, age, 10)则可以成功添加属性并实现响应式。引用\[3\]也给出了另一个示例代码，展示了在Vue组件中使用this.$set来添加属性的情况。在这个示例中，通过调用changeObj和changeArr方法来分别给obj对象和arr数组添加新的属性。通过this.$set方法可以实现对对象和数组的属性添加并实现响应式。
#### 引用[.reference_title]
- *1* *2* [Vue2中$set的使用](https://blog.csdn.net/gkx19898993699/article/details/128146171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue2中this.$set()详解](https://blog.csdn.net/weixin_56650035/article/details/118499385)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue中$set的用法

在 Vue.js 中，如果你使用了响应式数据（例如 data 中的属性），那么当你修改数据时，Vue 会自动检测到数据的变化，并更新对应的视图。但是，如果你需要添加新的属性到响应式数据中，Vue 无法检测到这个变化。这时候就可以使用 Vue 提供的 $set 方法来添加新的响应式属性。

$set 方法的用法如下：

Vue.set(object, propertyName, value)
// 或者
vm.$set(object, propertyName, value)

其中，

- object：要添加属性的对象。
- propertyName：要添加的属性名。
- value：要添加的属性值。

例如，我们有一个 data 对象：

data() {
  return {
    userInfo: {
      name: 'Tom'
    }
  }
}

如果我们想要添加一个 age 属性到 userInfo 对象中，并且希望该属性是响应式的，可以这样写：

this.$set(this.userInfo, 'age', 18)

这样，Vue 就会监听到 userInfo 对象的变化，从而更新视图。