Vue.set()方法

Vue.set() 方法的用法

Vue.set() 方法用于在 Vue 实例中的响应式对象中设置属性值。它的语法如下：

Vue.set(object, key, value)

其中，object 是要修改的对象，key 是要设置的属性名，value 是要设置的属性值。

需要注意的是，只有在使用 Vue.set() 方法设置对象属性时，Vue 才能正确地追踪属性的变化并触发视图更新。如果直接使用 object.key = value 的方式添加属性，Vue 无法检测到这个变化。

示例

下面是一个使用 Vue.set() 方法的示例，演示了如何在 Vue 实例的响应式对象中动态添加属性：

<div id="app">
  <button @click="addProperty">添加属性</button>
  <p>{{ data }}</p>
</div>

javascriptCopy codenew Vue({
  el: '#app',
  data() {
    return {
      data: {}
    };
  },
  methods: {
    addProperty() {
      Vue.set(this.data, 'property', 'value');
    }
  }
});

在上面的示例中，我们有一个按钮，点击按钮时会调用 addProperty() 方法。addProperty() 方法使用 Vue.set() 方法将名为 'property' 的属性添加到 data 对象中，并设置属性值为 'value'。

通过使用 Vue.set() 方法，我们告诉 Vue 我们正在对对象进行属性的修改，从而确保 Vue 能够正确地追踪变化并更新视图。这样，在添加新属性后，模板中的 {{ data }} 表达式会立即更新显示新的属性。

注意事项

在使用 Vue.set() 方法时，请注意以下几点：

只有在 Vue 实例的响应式对象上使用 Vue.set() 方法，才能触发视图更新。对于普通的 JavaScript 对象，Vue 是无法追踪属性变化的。

Vue.set() 方法只能用于添加新属性或修改现有属性的值。如果要删除属性，应使用 Vue.delete() 方法。

Vue.delete(object, key)

其中，object 是要修改的对象，key 是要删除的属性名。

对于数组，Vue 可以正常追踪其元素的变化，因此不需要使用 Vue.set() 方法来修改数组。但如果要改变数组的长度，如向数组末尾添加元素，应使用 array.splice() 方法或 Vue.set() 方法来触发视图更新。

array.splice(index, 0, element)  // 在指定索引位置插入元素

Vue.set(array, index, element)  // 修改数组指定索引位置的元素