Vue 'serverPrefetch' 生命周期钩子


示例

使用 serverPrefetch 生命周期钩子在服务器端获取数据。

export default {
  data() {
    return {
      data: null,
    };
  },
  async serverPrefetch() {
    const response = await fetch("https://random-data-api.com/api/v2/users"); 
    this.data = await response.json();
  }
};

定义和用法

serverPrefetch 生命周期钩子仅在服务器端渲染 (SSR) 期间发生。

serverPrefetch 生命周期钩子用于例如获取数据,以防您需要专门在服务器端执行此操作。

serverPrefetch 生命周期钩子用作异步函数,因此,如果它返回 Promise,服务器将等待渲染组件,直到 Promise 得到解析。

注意:在上面的示例中,缺少"运行示例"按钮,因为该示例无法运行,因为 serverPrefetch 钩子只会在服务器端渲染 (SSR) 期间被调用。


相关页面

Vue 教程: Vue 生命周期钩子

JavaScript 教程:异步 JavaScript