Vue.js onServerPrefetch()用法及代码示例

在组件实例在服务器上呈现之前注册一个要解析的异步函数。

类型

function onServerPrefetch(callback: () => Promise<any>): void

细节

如果回调返回一个 Promise，服务器渲染器将等到 Promise 被解析后再渲染组件。

此钩子仅在服务器端渲染期间调用，可用于执行server-only 数据获取。

示例

<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>

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 onServerPrefetch()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。