vue2this.$set

在Vue.js 2中，可以使用this.$set方法来实现响应式数据的更新。this.$set方法用于向对象或数组中添加属性或修改已有属性，并确保这些属性是响应式的。具体用法是通过调用this.$set(target, key, value)，其中target是需要添加属性的对象或数组，key是要添加的属性名，value是属性key对应的值。使用this.$set方法能够使得Vue能够检测到对象或数组的属性变化，并更新视图。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

相关问题

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 ]

vue2 this.$set()

this.$set()方法是Vue中用于添加响应式属性的方法。当我们需要给响应式对象新增属性时，直接赋值的方式是不会触发视图更新的。所以在这种情况下，我们需要使用this.$set()方法来手动添加新的属性，并确保这个属性是响应式的，以便能够触发视图更新。

具体来说，this.$set(target, key, value)方法接受三个参数：
- target: 需要添加属性的对象。
- key: 要添加的属性名。
- value: 属性key对应的值。

例如，在Vue组件中的mounted钩子函数中，我们可以通过this.$set()方法来添加属性到data中的对象或数组，并观察控制台的输出结果。

引用的示例代码可以清楚地展示了this.$set()方法的使用。在changeObj()方法中，使用this.$set(this.obj, "b", "新增的属性b")来给obj对象添加了一个名为"b"的属性。在changeArr()方法中，使用this.$set(this.arr, "3", 7)来给arr数组添加了一个索引为3的元素。这样通过this.$set()方法添加的属性或元素就能够正常地在页面中显示了。