vue是如何监听数组

Vue 监听数组的方法主要有以下几种：1、重写数组变异方法，2、使用 Vue.set 方法，3、使用 Object.defineProperty，4、通过 watch 选项，5、使用 Vue.observable 方法。这些方法确保 Vue 能够检测到数组中的变化并触发相应的视图更新。下面将详细描述每种方法的具体实现方式和背后的原理。

一、重写数组变异方法

Vue.js 重写了数组的变异方法，以便在数组发生变化时能够监听到这些变化并更新视图。变异方法包括：

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

当你使用这些方法修改数组时，Vue 会自动触发视图更新。例如：

let vm = new Vue({
  data: {
    items: [1, 2, 3]
  }
});
vm.items.push(4);  // 视图会自动更新

二、使用 `Vue.set` 方法

Vue 提供了一个全局的 Vue.set 方法，用于向响应式对象中添加新的属性或数组元素。这个方法确保新添加的属性或数组元素也是响应式的，并且会触发视图更新。

let vm = new Vue({
  data: {
    items: [1, 2, 3]
  }
});
Vue.set(vm.items, 3, 4);  // 添加新元素，视图会更新

三、使用 `Object.defineProperty`

在 Vue 2.x 中，数组的每个元素都使用 Object.defineProperty 来进行响应式处理。当你直接修改数组的某个索引时，Vue 并不能检测到这种变化，所以你需要使用 Vue.set 方法。

let vm = new Vue({
  data: {
    items: [1, 2, 3]
  }
});
vm.items[1] = 99;  // 视图不会更新
Vue.set(vm.items, 1, 99);  // 视图会更新

四、通过 `watch` 选项

你还可以使用 Vue 的 watch 选项来监听数组的变化。watch 选项提供了一个更灵活的方式来响应数据变化。

let vm = new Vue({
  data: {
    items: [1, 2, 3]
  },
  watch: {
    items: function(newVal, oldVal) {
      console.log('items changed', newVal, oldVal);
    }
  }
});
vm.items.push(4);  // 触发watch回调

五、使用 `Vue.observable` 方法

在 Vue 3.x 中，推荐使用 Vue.observable 方法来创建响应式对象。这个方法可以替代 Vue.set 和 Object.defineProperty，并且提供了更好的性能和更简单的 API。

let state = Vue.observable({
  items: [1, 2, 3]
});
state.items.push(4);  // 视图会自动更新

总结

Vue 监听数组的主要方法包括：重写数组变异方法、使用 Vue.set 方法、使用 Object.defineProperty、通过 watch 选项以及使用 Vue.observable 方法。这些方法都能够确保数组的变化能够被 Vue 监听到并触发相应的视图更新。对于不同的应用场景，可以选择最适合的方法来实现响应式数组的监听和更新。

为了更好地应用这些知识，建议：

熟悉每种方法的适用场景和限制。
在需要动态更新视图时，优先选择 Vue.set 或 Vue.observable 方法。
使用 watch 选项进行复杂的数组变化逻辑处理。
在 Vue 3.x 中，推荐使用 Vue.observable 方法来处理响应式对象和数组。

通过掌握这些方法，您可以更高效地开发 Vue 应用，并确保视图能够准确地反映数据的变化。