分享Vue3中通过axios获取后端数据遇到的坑

Vue3学习随笔之利用axios获取后端数据

起初我是这样写的：

<template>
  <table cellspacing="0px" cellpadding="10px">
    <tr>
      <td>booId</td>
      <td>bookName</td>
      <td>bookPrice</td>
      <td>bookAuthor</td>
      <td>publishTime</td>
    </tr>
    <tr v-for="book in books" :key="book.bookId">
      <td>{{ book.bookId }}</td>
      <td>{{ book.bookName }}</td>
      <td>{{ book.bookPrice }}</td>
      <td>{{ book.bookAuthor }}</td>
      <td>{{ book.publishTime }}</td>
    </tr>
  </table>
</template>

<script>
import axios from 'axios'
import { onMounted, reactive } from 'vue'
export default {
  name: "getBooks",
  setup() {
    let books = reactive([]);
    onMounted(() => {
      axios.get('http://localhost:8000/.../book/getBooks')
        .then(response => {
          books = response.data
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    })
    return { books, onMounted }
  }
}
</script>

我从后端获取的数据是如下的一段对象数组：

因此我可以定义一个响应式空数组，然后将从后端获取到的数据的data部分（response.data）传给数组，这样再通过onMounted钩子进行页面渲染。整个流程看起来貌似没什么问题，但是在我进入页面后却发现页面并没有被渲染。。。唉真让人头大。

中间我想过是不是因为钩子函数没有渲染到的原因，所以我又试了 onBeforeMount 钩子，然而发现并没卵用。最后我打开Vue开发者工具查看发现books仍是一个空数组，可是控制台确实能获取到数据啊，唉头又大了。


后来上网查了相关资料后才发现原来books经过被重新赋值后失去了响应式的特性，我又纳闷了，但是经过修改代码后发现确实是这种原因。。。

修改部分如下：

onMounted(() =>{
  axios.get('http://localhost:8000/.../book/getBooks')
    .then(response => {
      books.push(...response.data);
      console.log(response.data)
    })
    .catch(error => {
      console.log(error)
  	})
})

页面也正常显示了：

当然也有其他解决办法，我这里是直接用了数组的push方法，还可以将reactive改为ref同样可以。

就像这样：

let books = ref([])
books.value = response.data

还可以这样：

let books = reactive({
	list: []
})
books.list = response.data

但注意这时候就要把插值格式也改了，不然也没有值哦。

至于为什么这样，原因就是：reactive声明的响应式对象被books代理 ，操作代理对象需要有代理对象的前缀，直接覆盖会丢失响应式。