vue.js中$set与数组更新方法

当使用 Vue.js 进行开发的时候，因其响应式的数据绑定特性，我们通常使用数组来绑定和更新数据。但是由于 JavaScript 的限制，Vue.js 并不能检测数组的变化，比如直接改变数组的某个元素，或者修改数组的长度，这样就会导致视图不会更新而产生问题。因此，我们需要使用一些特殊的方法来更改数组并确保视图更新，Vue.js 提供了两种方法：

1. 直接利用 Vue.set 或 $set 方法修改数组：

Vue.set(array, index, value) 或者 vm.$set(array, index, value)

示例1：Vue.set方法

<template>
  <div>
    <p v-for="(item, index) in arr">{{ item }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    };
  },
  mounted() {
    Vue.set(this.arr, 1, 4);
  },
};
</script>

示例2：vm.$set方法

<template>
  <div>
    <p v-for="(item, index) in arr">{{ item }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    };
  },
  mounted() {
    this.$set(this.arr, 1, 4);
  },
};
</script>

这两种方法都可以直接修改数组，并确保视图得到更新，其中 array 表示需要修改的数组，index 表示需要修改的数组元素的索引，value 表示需要设置的值。

1. 使用变异的方法改变数组

Vue.js 提供了许多变异的方法来修改数组，在数据变化的时候可以用这些方法来更新视图。这些方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

这些方法都可以改变原数组，并且会触发视图的更新。以下是一个 push() 方法的示例：

<template>
  <div>
    <p v-for="(item, index) in arr">{{ item }}</p>
    <button @click="changeArr">点击改变数组</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    };
  },
  methods: {
    changeArr() {
      this.arr.push(4);
    },
  },
};
</script>

在上述代码中，我们使用了 push() 方法来添加一个新的元素 4，这样会直接修改数组，因此不需要调用任何方法来保证数组更新。

总结：Vue.js 中使用 $set 或 Vue.set 方法来直接修改数组并确保视图更新，同时使用变异的方法也可以改变数组并更新视图。在日常开发中，我们应该根据具体的情况选择适合自己的方法。