详解Vue 如何监听Array的变化

当使用 Vue.js 来开发 web 应用时，你会经常遇到需要变更数组中的元素的情况。为了自动更新视图，需要监听数组的变化并重新渲染相关的内容。这里就来详解一下 Vue 如何监听数组变化。

在 Vue2.0 之前，Vue 提供的是一个 $watch 函数来监听数组的变化。但是它有一些局限，他只能监听到数组的拷贝，在数组变化时也会得到通知，但无法监听到数组中元素值的变化。

Vue2.0 开始，Vue 提供了一个 watch 选项来监听数组的变化。这个选项使用了 “defineProperty” 或 “Proxy” 来拦截进入数组的方法，从而能够监听到对于数组元素改变。在 Vue2.1 之后，watch 选项支持同时监听对象和数组。

下面是一个简单的例子，监听数组的变化：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.text}}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{id: 1, text: 'item 1'}, {id: 2, text: 'item 2'}, {id: 3, text: 'item 3'}]
    };
  },
  methods: {
    addItem() {
      this.list.push({id: 4, text: 'item 4'});
    }
  },
  watch: {
    list: function(newVal, oldVal) {
      console.log('List changed', newVal, oldVal);
    }
  }
};
</script>

当点击 “Add Item” 按钮时，数组 list 会增加一个元素，控制台会打印 “List changed” 并显示数组的新值和旧值。

但是，有时我们需要节省性能，针对数组的某些改变才需要通知更新视图。Vue2.2 引入了一些新功能来解决这个问题，并提供了三个函数来处理数组：push, pop 和 shift。它们分别是：push, pop, shift, unshift, splice, sort 和 reverse。

示例1：使用 $set 函数来增加一个数组元素

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{id: 1, text: 'item 1'}, {id: 2, text: 'item 2'}, {id: 3, text: 'item 3'}]
    };
  },
  methods: {
    addItem() {
      this.$set(this.list, this.list.length, {id: 4, text: 'item 4'});
    }
  }
};
</script>

在这个例子中，我们使用 $set 函数插入一个新元素。这个函数支持为已有对象设置一个新属性，同时还可以触发监听器，将新增加的元素渲染到视图中。

示例2：使用 splice 函数来改变数组元素

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
    <button @click="changeItem">Change Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{id: 1, text: 'item 1'}, {id: 2, text: 'item 2'}, {id: 3, text: 'item 3'}]
    };
  },
  methods: {
    changeItem() {
      this.list.splice(1, 1, {id: 2, text: 'new item 2'});
    }
  },
  watch: {
    list: function(newVal, oldVal) {
      console.log('List changed', newVal, oldVal);
    }
  }
};
</script>

在这个例子中，我们通过 splice 函数将第二个元素从数组中移除，并将一个新元素插入到这个位置。这个函数还支持删除或插入元素并更新监听器，从而将更改反映到视图中。

总而言之，Vue 提供了多种方法用来监听数组的变化，在复杂的应用程序中，从新设置数组或调用 splice 函数等操作都是非常方便的。只要通过这些技巧来正确监听数组的变化，我们就可以轻松使用 Vue.js 构建 Web 应用程序。