Vue如何监测数组类型数据发生改变的(推荐)

Vue.js框架通过响应式系统来实现数据的自动更新，当数据发生改变时，Vue.js自动更新相关的视图。但是，Vue.js对于数组类型数据的处理比较特殊，当你通过索引改变数组中的某一个值时，Vue.js并不会检测到数组的变化。这是由于JavaScript的限制造成的。

而在Vue.js2.0版本之后新增了一个“响应式API”，即Vue.set或this.$set，用于动态新增Vue实例的属性，可以在增加新元素后触发视图更新：

Vue.set(vm.items, indexOfItem, newValue);
// 或者
this.$set(this.items, indexOfItem, newValue);

这样，当你改变数组数据时，Vue.js就可以感知到变化了。下面通过示例来进一步理解。

示例1

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{item}}</li>
    </ul>
    <button @click="addItem()">添加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ["apple", "banana", "orange"],
    };
  },
  methods: {
    addItem() {
      this.items.push("pear");
    },
  },
};
</script>

在这个示例中，我们定义了一个items数组，并在模板中使用v-for语句渲染数组中的每一个元素。然后我们添加了一个按钮，用于在数组中新增一个元素pear。这是一个非常典型的修改数组元素的操作，如果我们直接使用push方法向数组中添加pear元素，Vue.js是无法检测到变化的。

因此，我们需要改写addItem方法，使用Vue.set或this.$set方法向数组中添加pear元素：

// 修改后的addItem方法
addItem() {
  this.$set(this.items, this.items.length, "pear");
},

这样就可以正确地触发视图的更新了。

示例2

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{item}}</li>
    </ul>
    <button @click="reverseItems()">反转</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ["apple", "banana", "orange"],
    };
  },
  methods: {
    reverseItems() {
      this.items.reverse();
    },
  },
};
</script>

在这个示例中，我们同样定义了一个items数组，并且在模板中使用v-for语句渲染数组中的每一个元素。这次我们添加了一个按钮，用于将数组反转。这个例子比较特殊，我们并不需要使用Vue.set或this.$set方法来触发视图的更新。因为当你调用数组的reverse方法时，Vue.js会自动检测到数组的变化。但是，当你像第一个示例中那样使用push方法添加元素时，就必须使用Vue.set或this.$set方法来手动触发视图更新。

综上所述，Vue.js的响应式数据系统在处理数组类型数据时需要特别处理。我们需要注意到这一点，并根据实际情况选择合适的更新方式。