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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。