Vue2 如何监听数组变化

在Vue2的开发过程中，监听数组的变化是一个常见的需求。由于JavaScript的限制，Vue2不能检测到数组通过索引直接修改元素、修改数组长度等操作的变化，这就需要我们掌握特定的方法来实现对数组变化的监听。

Vue2 提供了一些内置的方法来监听数组变化。首先是 Vue.set() 方法。当我们需要通过索引来修改数组中的元素时，直接使用 array[index] = newValue 这种方式，Vue 是无法检测到变化的。此时，我们可以使用 Vue.set()。例如：

data() {
    return {
        myArray: [1, 2, 3]
    }
},
methods: {
    changeArray() {
        Vue.set(this.myArray, 1, 100);
    }
}

在这个例子中，Vue.set() 方法会触发视图更新，让Vue检测到数组元素的变化。

其次是 this.$set()，它本质上和 Vue.set() 是一样的，只是在使用上更简洁。比如：

data() {
    return {
        myArray: [1, 2, 3]
    }
},
methods: {
    changeArray() {
        this.$set(this.myArray, 1, 100);
    }
}

另外，当我们需要修改数组长度时，使用 this.myArray.length = newLength 这种方式Vue同样检测不到变化。我们可以使用数组的原生方法 splice() 来实现。splice() 方法不仅可以删除元素，还能插入或替换元素，并且Vue能够检测到这种变化。例如：

data() {
    return {
        myArray: [1, 2, 3]
    }
},
methods: {
    changeArray() {
        this.myArray.splice(1, 1); // 删除索引为1的一个元素
    }
}

除了上述方法外，Vue2 响应式原理基于Object.defineProperty()，所以在创建数组时尽量使用 Vue 内置的响应式数组方法，如 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 等，这些方法在调用时会触发视图更新，从而让我们可以方便地监听数组的变化。掌握这些监听数组变化的方法，能够让我们在Vue2项目开发中更高效地处理数据，提升用户体验。