Vue2监听数组变化的五种方法

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
  watch: {
    items: {
      handler(newVal, oldVal) {
        console.log('数组发生了变化', newVal, oldVal);
      },
      deep: true // 深度监听，确保可以捕获到数组内部的变化
    }
  },
  methods: {
    addItem() {
      this.items.push(4); // 添加新元素
    }
  }
});

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
  watch: {
    'items.length': function(newLength, oldLength) {
      console.log(`数组长度从 ${oldLength} 变为 ${newLength}`);
    }
  },
  methods: {
    addItem() {
      this.items.push(4); // 添加新元素
    }
  }
});

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
  watch: {
    'items[0]': function(newVal, oldVal) {
      console.log(`数组的第一个元素从 ${oldVal} 变为 ${newVal}`);
    }
  },
  methods: {
    updateFirstItem() {
      this.items[0] = 10; // 修改第一个元素
    }
  }
});

this.$set(this.items, 0, 10); // 替换数组的第一个元素

this.items.splice(0, 1, 10); // 替换数组的第一个元素

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
  computed: {
    itemCount() {
      return this.items.length;
    }
  },
  watch: {
    itemCount(newCount, oldCount) {
      console.log(`数组长度从 ${oldCount} 变为 ${newCount}`);
    }
  },
  methods: {
    addItem() {
      this.items.push(4); // 添加新元素
    }
  }
});