vue.set有什么用

vue.set用于向Vue实例中的响应式对象添加新的属性，因为Vue不能检测到对象属性的添加或删除。

在Vue中，当data中定义的属性发生变化时，Vue会自动重新渲染相关的视图。但是Vue不能自动追踪对象属性的添加或删除，这是由于JavaScript的限制。

如果我们需要向响应式对象中添加新的属性，并且希望这些属性也能够响应式地被观察和更新UI，那么就需要使用vue.set方法。

vue.set的语法如下：
Vue.set(obj, propertyName, value)

• obj: 需要添加属性的对象
• propertyName: 指定要添加的属性名
• value: 指定要添加的属性的值

示例代码如下：

// 定义一个Vue实例
var vm = new Vue({
  data: {
    user: {
      name: 'John',
      age: 30
    }
  }
});

// 在Vue实例中添加新属性
vue.set(vm.user, 'gender', 'male');
console.log(vm.user.gender); // 'male'

以上示例中，我们将一个新的属性gender添加到了Vue实例中的user对象中。由于使用了vue.set方法，gender属性会被Vue追踪并且可以响应式地更新。

需要注意的是，vue.set只能用于添加属性，如果想要删除属性，需要使用Vue.delete方法。

Vue.set是Vue.js中的一个全局方法，用于在响应式对象上设置一个属性，并确保该属性是响应式的。

1. 动态添加属性并保持响应式：
   Vue.js在初次渲染时会对data中的属性进行响应式处理，如果在后续操作中添加了一个新的属性，Vue.js是不会为这个新属性添加响应式的。这时可以使用Vue.set方法来动态添加属性并保持响应式。例如：

Vue.set(obj, 'newProperty', value)

2. 数组更新：
   对于数组，Vue.set方法可以确保数组的某一元素被更新后，能够触发视图的重新渲染。而直接通过下标修改数组中的元素是不能实现这一效果的。例如：

Vue.set(array, index, newValue)

3. 响应式值的更新检测：
   使用Vue.set方法设置属性值时，会触发Vue.js的更新检测机制，对于引用了这个属性的组件，会重新渲染相应的视图。这样，可以确保视图与数据的同步。

4. 解决键名为数字的属性不响应的问题：
   在Vue.js的响应式系统中，当键名为数字时，Vue.js会对其进行特殊处理，不会将其转化为响应式的属性。这时需要使用Vue.set方法来设置键名为数字的属性。例如：

// data中定义一个初始的students数组
data() {
  return {
    students: []
  }
}

// 动态添加一个键名为数字的属性
this.$set(this.students, 0, { name: 'Tom', age: 18 })

5. 在嵌套对象中添加响应式属性：
   当数据中的对象是嵌套结构时，直接给属性赋值是不能实现响应式的。需要使用Vue.set方法来添加响应式属性。例如：

Vue.set(obj, 'nested', { property: value })

总之，Vue.set方法可以用于动态添加属性并保持响应式，在数组中更新元素，解决键名为数字的属性不响应的问题，以及在嵌套对象中添加响应式属性等场景。

Vue.set是Vue.js提供的一个全局方法，用于在Vue实例中动态添加响应式属性。它的作用是在对象上设置响应式属性，并触发视图更新。

在Vue中，通过data选项来定义数据对象，这些数据会变为响应式的，即当数据发生改变时，会自动更新到视图上。然而，如果我们想要在运行时动态地添加响应式属性，就无法通过简单地赋值的方式实现。这时，就需要使用Vue.set方法。

Vue.set的语法如下：

Vue.set(target, key, value)

其中：

• target：要设置属性的目标对象，可以是一个 Vue 实例、Vue 组件、data选项中的对象或者继承自 Vue 的实例。
• key：要设置的属性名。
• value：要设置的属性值。

使用Vue.set方法，可以将一个新的属性添加到响应式对象上，确保它也是响应式的，并且触发视图更新。这样，新增的属性就可以在模板中进行使用，并且当该属性的值发生变化时，相应的视图也会得到更新。

下面我们通过一个例子来展示Vue.set的使用。

首先，在一个Vue实例中定义一个data选项，包括一个初始的对象：

data() {
  return {
    person: {
      name: 'John',
      age: 25
    }
  }
}

然后，在某个方法中调用Vue.set来动态添加一个新的属性：

methods: {
  addProperty() {
    Vue.set(this.person, 'address', '123 Main St')
  }
}

最后，在模板中添加按钮，点击按钮时调用addProperty方法：

<button @click="addProperty">Add Property</button>

当点击按钮时，调用addProperty方法会触发Vue.set方法，将address属性添加到person对象上。因为address是响应式属性，所以它会立即显示在视图上。

总结：
Vue.set方法在Vue实例中动态添加响应式属性，确保新增的属性也是响应式的，并触发视图更新。它是在运行时动态修改数据对象的一种方式，特别适用于需要动态添加属性的情况。