vue2怎么监听数组

在 vue 2 中监听数组的变化，有两种方法：使用 vue.set() 方法，用于设置数组中某个索引的值。使用 array.prototype 中的变异方法，如 push()、pop() 等。但要注意，数组中的对象是通过引用传递的，修改对象属性不会触发更新。

Vue 2 中监听数组

在 Vue 2 中，监听数组的变化可以通过 Vue.set() 方法和 Array.prototype 中的变异方法来实现。

Vue.set() 方法

Vue.set() 方法用于设置数组中的某个索引的值。当使用该方法时，Vue 会自动检测到数组的变化并触发相应的更新。例如：

立即学习“前端免费学习笔记（深入）”；

const app = new Vue({
  data() {
    return {
      array: [1, 2, 3]
    }
  }
});

app.array[0] = 4; // 直接修改数组不会触发更新
Vue.set(app.array, 0, 4); // 使用 Vue.set() 可以触发更新

Array.prototype 中的变异方法

Array.prototype 中的变异方法也会触发 Vue 的响应式更新，包括：

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

例如：

const app = new Vue({
  data() {
    return {
      array: [1, 2, 3]
    }
  }
});

app.array.push(4); // 触发更新

需要注意的是，数组中的对象是通过引用而不是值传递的。因此，修改数组中的对象的属性不会触发更新。要监听对象的更改，必须使用 Vuex 或其他状态管理库。