码农教程 - 一技在手,衣食无忧! tools

Vue serverPrefetch 生命周期挂钩

❮ 上一节 Vue 生命周期钩子参考 下一节 ❯

示例

使用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生命周期钩子用作异步函数，因此如果它返回承诺，服务器将等待渲染组件，直到承诺得到解决。

笔记：在上面的示例中，缺少 "Run Example" 按钮，因为该示例无法按serverPrefetch钩子只会在服务器端渲染（SSR）期间被调用。

相关页面

Vue教程：Vue 生命周期挂钩

JavaScript 教程：异步 JavaScript


❮ 上一节 Vue 生命周期钩子参考 下一节 ❯