Vue3 中的这个异步 function 有什么问题？

Question

这是一个非常简单的概念错误，但无论如何我无法解决它，我在 onMounted 钩子中制作 axios.get() ，在 onMounted 块内一切都显示正确⇾三个对象的数组. 但是一旦我将它返回到模板并对其进行插值以查看该值只是一个空数组。
这是代码：

<template>
  <div class="container">
  <h1>Events for good</h1>
    <img alt="Vue logo" src="../assets/logo.png" />
    <EventCard v-for="event in events" :key="event.id" :event="event"/>
    {{ events }}
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';

import { Event } from '@/types/event';

import EventCard from '@/components/EventCard.vue';

import axios from 'axios';

export default defineComponent({
  name: 'EventList',
  components: {
    EventCard
  },
  setup() {

  let events = reactive<Event[]>([])

  onMounted( async() => {
    const response = await axios.get('http://localhost:3000/events'); 
    console.log(response.data)
    events = response.data
    console.log(events)
  })
    return {
      events
    }
  }
  });
</script>

这是日志和插值图像：

Answer 1

尝试使用Object.assign来改变反应数据：

 Object.assign(events, response.data)

或者使用响应定义 state 并将events定义为字段：

let state = reactive({
  events:[]
})
...
state.events = response.data

Answer 2

events被response.data覆盖，这有效地从组件的上下文中删除了原始的reactive()实例：

let events = reactive<Event[]>([])

onMounted(async () => {
  ⋮
  events = response.data // ❌ `events` is now the same as `response.data`,
                         // and the original value is gone!
})

注意：在这里使用const通常可以防止这些错误：

const events = reactive<Event[]>([]) // 👍 const prevents accidental overwrites like above

解决方案

一种解决方案是将events声明为ref而不是reactive ：

const events = ref<Event[]>([])

onMounted(async () => {
  ⋮
  events.value = response.data // ✅ `events.value` is now the same value as `response.data`
})

演示