vue$set方法（vue set方法原理）

简介：

在Vue.js中，当我们类似于给数组中的一个元素赋值或添加一个新的属性时，Vue.js并不会监听这个操作。因此，我们需要使用Vue.js提供的$set方法来确保这个操作可以正常触发Vue.js的响应式系统。

多级标题：

一、什么是$set方法？

二、为何需要使用$set方法？

三、$set方法的语法和用法

四、$set方法的示例说明

内容详细说明：

一、什么是$set方法？

在Vue.js中，$set方法被用来触发Vue.js的响应式系统。我们通常使用$set方法来给一个数组或对象增加新的属性时，确保这个操作可以得到Vue.js的正确监听。

二、为何需要使用$set方法？

Vue.js的响应系统是基于侦听器实现的。当我们的数据被修改时，Vue.js会自动检测并更新DOM视图。但是，当我们给数组中的一个元素赋值或添加一个新的属性时，Vue.js并不会监听这个操作。这时，我们需要使用$set方法来确保Vue.js可以正确地监听这个操作。

三、$set方法的语法和用法

语法：Vue.set(target, key, value)/this.$set(target, key, value)

其中，target是要进行操作的对象或数组，key是要增加的属性名或数组索引，value是要赋予该属性的值。

我们可以使用Vue.set方法，也可以使用Vue实例的$set方法。两者是等价的。

四、$set方法的示例说明

示例一：在一个数组里新增一个元素

假设我们有以下数组：

data: {

myArray: [1, 2, 3]

我们尝试在myArray中新增一个元素4，在Vue.js旧版本中，我们可以使用以下代码：

this.myArray.push(4);

但是在新版本中，我们需要使用$set方法来确保该操作可以正确触发Vue.js的响应式系统：

Vue.set(this.myArray, 3, 4);

或者：

this.$set(this.myArray, 3, 4);

示例二：在一个对象里新增一个属性

假设我们有以下对象：

data: {

myObject: {

name: 'John',

age: 30

}

我们尝试在myObject中增加一个属性address，在Vue.js旧版本中，我们可以使用以下代码：

this.myObject.address = 'Beijing';

但是在新版本中，我们需要使用$set方法来确保该操作可以正确触发Vue.js的响应式系统：

Vue.set(this.myObject, 'address', 'Beijing');

或者：

this.$set(this.myObject, 'address', 'Beijing');

综上所述，$set方法是在Vue.js中触发响应式系统的重要方式。我们应该在需要新增属性或元素时必须使用它，以便保证Vue.js对该操作的响应。