onServerPrefetch()
组件实例,在服务器上呈现之前,注册一个要解析的异步函数。
类型
function onServerPrefetch(callback: () => Promise<any>): void
细节
如果回调返回一个Promise,服务器渲染器将等到Promise被解析后再渲染组件。
此钩子仅在服务器端渲染期间调用,可用于执行仅服务器数据获取。
例子
<script setup> import { ref, onServerPrefetch, onMounted } from 'vue' const data = ref(null) onServerPrefetch(async () => { // component is rendered as part of the initial request // pre-fetch data on server as it is faster than on the client data.value = await fetchOnServer(/* ... */) }) onMounted(async () => { if (!data.value) { // if data is null on mount, it means the component // is dynamically rendered on the client. Perform a // client-side fetch instead. data.value = await fetchOnClient(/* ... */) } }) </script>