Vue3中v-for无法正常渲染列表，是模板数据返回方式有误吗？

setup里直接声明的普通变量events不具备响应性，你在接口请求回调里直接给events重新赋值的操作，Vue的响应式系统完全捕获不到，模板不会触发重渲染，所以v-for始终拿的是初始的空数组，自然不会渲染任何子组件。你在控制台能打印出正确数据，只是说明赋值操作本身执行成功了，不代表模板能感知到这个变化。

推荐方案：用ref声明响应式状态 #

这是Vue3组合式API的标准写法，从vue包中引入ref，用它包裹初始空数组，后续更新值的时候操作.value属性即可，修改后的父组件完整代码：

<template>
  <div class="home">
    <EventCard v-for="event in events" :key="event.id" :event="event" />
  </div>
</template>

<script>
import EventCard from "@/components/EventCard.vue";
import axios from "axios";
// 补充引入ref
import { onBeforeMount, ref } from "vue";

export default {
  name: "EventList",
  components: {
    EventCard,
  },
  setup() {
    // 定义响应式数组
    const events = ref([]);

    onBeforeMount(async () => {
      const res = await axios.get(
        "https://my-json-server.typicode.com/Tommydemian/real-world-vue-3/db"
      );
      // 给响应式变量的value属性赋值
      events.value = res.data.events;
    });

    return {
      events,
    };
  },
};
</script>

兼容写法：不替换数组引用 #

如果暂时不想用响应式API，也可以保留初始的events数组引用，通过数组原生方法把接口返回的数据追加到原数组中，Vue可以侦测到这类数组变更：

setup() {
  let events = [];

  onBeforeMount(async () => {
    const res = await axios.get(
      "https://my-json-server.typicode.com/Tommydemian/real-world-vue-3/db"
    );
    // 不替换变量指向，直接修改原数组内容
    events.push(...res.data.events);
  });

  return {
    events,
  };
}

补充：子组件里的空console.log()语句不影响功能运行，可以保留也可以直接删除。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo