vue如何实时往数组里追加数据

当我们需要在 Vue 中实时往数组里追加数据时，有以下几种方法可供选择：

1. 使用 push() 方法

Vue 的数据双向绑定机制，使得当数组发生变更时，页面会自动更新渲染。因此，使用 JavaScript 原生的 push() 方法向数组中追加数据就可以实现实时更新视图的效果。这个方法会接收待添加的数据，把它添加到数组的最后位置。示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.content }}
      </li>
    </ul>
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      index: 1
    }
  },
  methods: {
    addItem() {
      this.items.push({ id: this.index++, content: `第${this.index}项` })
    }
  }
}
</script>

上述示例中，定义了一个空数组 items，并定义了一个 index，用于生成每一项数据的唯一标识。addItem() 方法向数组末尾添加一个新的对象，对象中包含 id 和 content 两个字段，分别代表数据项的唯一标识和内容。添加完成后自增 index。

2. 使用 splice() 方法

splice() 方法是 JavaScript 数组自带的 API，可以实现对数组的删除和插入操作，可以在指定位置插入数据。该方法的第一个参数为插入数据的位置，设置为数组的长度，即代表在最后插入。第二个参数设置为 0，代表不删除任何元素，第三个参数则是待插入的新元素。示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.content }}
      </li>
    </ul>
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      index: 1
    }
  },
  methods: {
    addItem() {
      this.items.splice(this.items.length, 0, { id: this.index++, content: `第${this.index}项` })
    }
  }
}
</script>

上述示例中，addItem() 方法利用 splice() 方法，在数组末尾插入新的数据项，每插入一次数组的长度就会加 1，并更新数组的最后一项数据。数据能够实时渲染，并且不需要触发整个数组的替换操作。

以上两种方法都可以实现往 Vue 中的数组实时添加数据，并重新渲染视图。开发者可以根据具体场景进行选择使用。