當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文


Vue.js serverPrefetch用法及代碼示例

在組件實例在服務器上呈現之前要解析的異步函數。

類型

interface ComponentOptions {
  serverPrefetch?(this: ComponentPublicInstance): Promise<any>
}

細節

如果鉤子返回一個 Promise,服務器渲染器將等到 Promise 被解析後再渲染組件。

此鉤子僅在服務器端渲染期間調用,可用於執行server-only 數據獲取。

示例

export default {
  data() {
    return {
      data: null
    }
  },
  async serverPrefetch() {
    // component is rendered as part of the initial request
    // pre-fetch data on server as it is faster than on the client
    this.data = await fetchOnServer(/* ... */)
  },
  async mounted() {
    if (!this.data) {
      // if data is null on mount, it means the component
      // is dynamically rendered on the client. Perform a
      // client-side fetch instead.
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

相關用法


注:本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 serverPrefetch。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。