假设条件

使用axios从服务器获取数据，返回的数据：

{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"},{"id":2,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"},{"id":3,"bookname":"红楼梦","author":"曹雪芹","publisher":"上海图书出版社"},{"id":239,"bookname":"水浒传续集","author":"施耐庵","publisher":"上海图书出版社"},{"id":240,"bookname":"金瓶梅","author":"兰陵笑笑生","publisher":"香江出版社出版"}]}

方法一：使用ref

组件代码：

<script setup>
  // getBooks获取的是服务器接口数据{status,data,msg}
  // 实际使用的数据是data属性
  import { getBooks } from "@/request/api.js";
  import { ref } from "vue";
  // ref初始化一个变量，用于接收接口数据data属性
  let books = ref(null);
  async function handler() {
    // await 后面的函数返回的是一个promise对象，我们只需要其中data属性的值，所以做了解构
    let { data } = await getBooks();
    // 由于是使用ref，所以javascript中需要给.value赋值
    books.value = data;
    console.log("books:", books);
  }
</script>
<template>
首页
<button @click="handler">获取书籍信息</button>
<hr />
<table border="1">
  <tr>
    <td>序号</td>
    <td>书名</td>
    <td>作者</td>
    <td>出版社</td>
  </tr>
  <!-- 模板内直接访问，不需要使用 .value 方式访问 -->
  <tr v-for="book in books" :key="book.id">
    <td>{{ book.id }}</td>
    <td>{{ book.bookname }}</td>
    <td>{{ book.author }}</td>
    <td>{{ book.publisher }}</td>
  </tr>
  </table>
</template>

方法二：使用reactive

组件代码：

<script setup>
  // getBooks获取的是服务器接口数据{status,data,msg}
  // 实际使用的数据是data属性
  import { getBooks } from "@/request/api.js";
  import { reactive } from "vue";
  // reactive初始化一个变量，用于接收接口数据data属性
  let result = reactive({ books: [] });
  async function handler() {
    // await 后面的函数返回的是一个promise对象，我们只需要其中data属性的值，所以做了解构
    let { data } = await getBooks();
    result.books = data;
  }
</script>
<template>
首页
<button @click="handler">获取书籍信息</button>
<hr />
<table border="1">
  <tr>
    <td>序号</td>
    <td>书名</td>
    <td>作者</td>
    <td>出版社</td>
  </tr>
  <tr v-for="book in result.books" :key="book.id">
    <td>{{ book.id }}</td>
    <td>{{ book.bookname }}</td>
    <td>{{ book.author }}</td>
    <td>{{ book.publisher }}</td>
  </tr>
  </table>
</template>

从美观度来说，使用ref的方法模板显得更简洁一些