vue2 监听数组长度变化

在Vue.js 2.x版本中，监听数组长度的变化通常通过计算属性（Computed Properties）或者`v-once`指令配合`$watch`方法来实现。这是因为直接操作数组的length属性不会触发Vue的响应式更新，所以需要手动监控。

这里是一个简单的例子：

<template>
  <div>
    当前数组长度: {{ arrayLength }}
    <button @click="addElement">增加元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  computed: {
    arrayLength() {
      return this.items.length;
    }
  },
  methods: {
    addElement() {
      this.items.push('新元素');
      // 或者使用 $watch 直接监听 length 变化
      // this.$watch('items', () => {
      //   console.log('数组长度发生变化');
      // }, { deep: false });
    }
  }
};
</script>

在这个例子中，当你点击"增加元素"按钮时，会添加一个新的元素到`items`数组，并且`arrayLength`会自动更新。如果使用`$watch`，会在数组内容改变（包括长度）时触发回调。