Vue3如何从服务器动态加载数据并在v-for循环中展示？

问题原因 #

在Vue3的<script setup>中，直接用let声明的普通数组不属于响应式对象，Vue无法追踪其内部变化。所以即使你通过push添加了新元素，控制台能看到数组更新，但模板不会触发重新渲染。

解决方案 #

使用Vue提供的ref或reactive将数组转为响应式对象，同时修正v-for的使用位置（原代码会为每个数组元素生成单独的<ul>标签，这不符合常规列表结构），并添加:key属性优化列表渲染。

方案1：使用ref（推荐用于基本类型/数组）

<template>
  <ul>
    <li v-for="number in numbers" :key="number.num">
      {{ number.num }} : {{ number.text }}
    </li>
  </ul>
  {{ numbers }}
</template>

<script setup>
import { ref } from 'vue';

// 用ref包裹数组，转为响应式对象
let numbers = ref([
  { num: 1, text: "One" },
  { num: 2, text: "Two" },
  { num: 3, text: "Three" }
]);

// 模拟服务器请求
setTimeout(() => {
  // 修改ref包裹的数组需通过.value属性
  numbers.value.push({ num: 4, text: "Four" });
  console.log(numbers.value);
}, 3000);
</script>

方案2：使用reactive（用于复杂对象/数组）

<template>
  <ul>
    <li v-for="number in numbers" :key="number.num">
      {{ number.num }} : {{ number.text }}
    </li>
  </ul>
  {{ numbers }}
</template>

<script setup>
import { reactive } from 'vue';

// 用reactive创建响应式数组
let numbers = reactive([
  { num: 1, text: "One" },
  { num: 2, text: "Two" },
  { num: 3, text: "Three" }
]);

// 模拟服务器请求
setTimeout(() => {
  // reactive包裹的数组可直接操作
  numbers.push({ num: 4, text: "Four" });
  console.log(numbers);
}, 3000);
</script>

关键说明 #

• ref包裹的响应式数据，在脚本中需通过.value访问/修改，模板中会自动解包无需额外处理；
• reactive适用于复杂对象或数组，直接操作即可，但注意不能直接给整个数组重新赋值（如numbers = []会丢失响应式）；
• 列表渲染时必须添加:key属性，帮助Vue高效识别DOM元素的变化，避免不必要的重渲染。

内容的提问来源于stack exchange，提问作者Tenarius