vue <setup> 实时读取后端数据

Vue3中的 `<setup>` 特性是组合式API的一部分，它允许你在组件内部编写自定义的setup函数，这个函数类似于React Hooks的useEffect或React Context的Provider。如果你想要实时从后端获取数据并更新视图，可以按照以下步骤操作：

1. 首先，在`<script setup>`部分导入必要的依赖，如axios用于HTTP请求：

import { ref, onMounted } from 'vue';
import axios from 'axios';

2. 创建一个响应式的ref来存储数据，例如一个用户列表：

const userList = ref([]);

3. 使用`onMounted`钩子在组件挂载时发起请求：

onMounted(async () => {
  try {
    const response = await axios.get('/api/users');
    userList.value = response.data;
  } catch (error) {
    console.error('Error fetching users:', error);
  }
});

4. 当后端数据发生变化时，你可以考虑设置一个watcher或者订阅后端的事件通知，但这通常需要配合服务端支持这样的功能。如果后端提供轮询或WebSocket等实时更新机制，你可以在相应的地方更新`userList`。

5. 然后在模板中通过`v-for`遍历`userList`显示数据：

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>