当前位置：首页 > VUE

vue实现数据追加

2026-02-18 12:46:57VUE

数据追加的实现方法

在Vue中实现数据追加可以通过多种方式完成，主要取决于数据源和渲染方式。以下是几种常见场景的实现方法：

数组数据追加 通过push()或展开运算符向现有数组追加新数据：

vue实现数据追加

// 方法1：push()
this.list.push(newItem);

// 方法2：展开运算符
this.list = [...this.list, ...newItems];

对象属性合并 使用Object.assign()或展开运算符合并对象：

// 方法1：Object.assign()
this.obj = Object.assign({}, this.obj, newData);

// 方法2：展开运算符
this.obj = { ...this.obj, ...newData };

表单输入追加 在表单输入场景中实时追加输入内容：

vue实现数据追加

<input v-model="inputText" @keyup.enter="addItem">

methods: {
  addItem() {
    if(this.inputText.trim()) {
      this.items.push({
        id: Date.now(),
        text: this.inputText
      });
      this.inputText = '';
    }
  }
}

服务端数据追加

从API获取数据时实现分页加载：

async loadMore() {
  const res = await axios.get('/api/data', {
    params: { page: this.currentPage + 1 }
  });
  this.items = [...this.items, ...res.data];
  this.currentPage++;
}

性能优化建议

大规模数据追加时考虑虚拟滚动：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div>{{ item.text }}</div>
  </RecycleScroller>
</template>