vue 监听数组变化后赋值

在Vue.js中，监听数组的变化并自动更新视图通常通过`v-model`, `watch`属性或者`$set`方法来实现。`v-model`本身就能处理数组的深度监听，但如果直接操作数组元素可能会导致视图未更新的问题，这是因为Vue的响应式系统默认只监听数组的索引更改。

这里以`watch`为例：

data() {
  return {
    items: [1, 2, 3]
  }
}

// 使用 watch 监听数组变化
watch: {
  items(newItems) {
    // 这里使用 $set 方法确保 Vue 能跟踪到新添加或删除的元素
    this.$set(this, 'items', newItems);
  }
}

当你在`newItems`改变时，如`this.items.push(4)`，`watch`中的回调会被触发，并将新的数组赋值给`items`，从而使得视图自动更新。

另外一种常用的方式是在数组方法内部使用`this.$emit('update:items')`手动通知Vue更新：

methods: {
  addItem() {
    const newItem = { /* ... */ };
    this.items.push(newItem);
    this.$emit('update:items', this.items); // 触发视图更新
  }
}