vue3获取数据时机

在Vue 3中，获取数据的时机可以有多个选择。根据你的描述，你已经尝试了在`beforeRouteEnter`钩子中获取数据并在页面渲染之前将数据传递给跳转页面的实例，但是数据没有成功渲染出来。

一种常见的获取数据的时机是在组件的`onMounted`钩子函数中获取数据。在这个钩子函数中，你可以使用`axios`或其他HTTP库发送请求并获取数据。然后，将获取到的数据赋值给响应式的变量，以便触发页面的重新渲染。

根据你提供的代码示例，应该将获取到的数据赋值给`books`变量，而不是直接赋值给`books`对象。你可以通过`books = response.data`的方式将数据赋值给`books`变量。但是，需要注意的是，由于`books`是响应式的变量，你应该使用Vue提供的`unref`函数将其转换为普通的JavaScript对象，然后再进行赋值。具体的代码示例如下：

import axios from 'axios'
import { onMounted, reactive, unref } from 'vue'

export default {
  name: "getBooks",
  setup() {
    let books = reactive([]);

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

    return { books, onMounted }
  }
}

这样，当组件被挂载到DOM上后，`onMounted`钩子函数会触发，并在获得数据后将其赋值给`books`变量。页面会根据`books`的变化重新渲染，显示获取到的数据。

除了在`onMounted`钩子函数中获取数据，你还可以在其他生命周期钩子函数中获取数据，如`onBeforeMount`、`onUpdated`等，根据你的需求选择合适的时机获取数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [对Vue beforeRouteEnter 的next执行时机详解](https://download.csdn.net/download/weixin_38700409/13620626)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [分享Vue3中通过axios获取后端数据遇到的坑](https://blog.csdn.net/m0_50763141/article/details/124327819)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]