Nuxt.js 中的 asyncData, fetch, created 钩子在 SSR 过程中有何区别和执行顺序？

各位前端的靓仔俊女们，大家好！今天咱们来聊聊 Nuxt.js 里几个 SSR 阶段的关键钩子：asyncData、fetch 和 created。这三个家伙，用得好了能让你的 Nuxt 应用起飞，用错了就可能让你原地爆炸，所以务必认真听讲！

咱们先打个招呼，我是你们今天的讲师，人称“代码界的段子手”，争取用最幽默风趣的方式，把这些枯燥的技术点讲明白。

一、钩子们的“爱恨情仇”：SSR 阶段的区别

首先，我们要明确一个大前提：这三个钩子在客户端渲染 (CSR) 和服务器端渲染 (SSR) 时的行为是有差异的。重点在于 SSR 阶段，因为这才是我们今天的主角。

钩子	作用范围	SSR 执行环境	是否阻塞渲染	主要用途
asyncData	页面组件 (pages 目录下的组件)	服务器端 & 客户端 (首次)	是	获取数据，并将数据合并到组件的 data 中。通常用于获取页面初始化所需的数据，例如文章列表、用户信息等。由于阻塞渲染，所以获取的数据是服务器端渲染结果的一部分，对 SEO 非常友好。
fetch	页面组件 (pages 目录下的组件)	服务器端 & 客户端 (首次)	否	获取数据，但不直接修改 data。更常用于执行一些副作用操作，比如更新 Vuex store，或者发起一些统计请求。 由于不阻塞渲染，所以不会影响首屏渲染速度，但获取的数据不会出现在服务器端渲染的 HTML 中。
created	所有组件 (包括页面和组件)	服务器端 & 客户端	否	组件创建时执行，可以访问 this。通常用于执行一些初始化操作，比如设置组件的初始状态，或者绑定事件监听器。在 SSR 阶段，created 钩子只执行一次，用于执行一些服务器端需要执行的初始化逻辑。

总结一下：

• asyncData: “我是老大！我负责获取页面初始数据，而且我阻塞渲染，保证 SEO！”（页面组件专属）
• fetch: “我默默无闻，负责更新 Vuex，做一些不影响渲染的后台操作。”（页面组件专属）
• created: “我老实本分，组件创建时执行，服务器客户端我都跑，但服务器端只执行一次。”（所有组件通用）

二、代码实战： 让你彻底搞懂它们

光说不练假把式，咱们直接上代码，通过例子来加深理解。

1. asyncData 的用法

假设我们需要在首页显示一个文章列表，我们可以这样使用 asyncData：

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">{{ article.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    try {
      const response = await $axios.$get('/api/articles'); // 假设有一个接口返回文章列表
      return { articles: response };
    } catch (error) {
      console.error('获取文章列表失败:', error);
      return { articles: [] }; // 出错时返回空数组，避免页面崩溃
    }
  }
}
</script>

解析：

• asyncData 是一个异步函数，它接收一个上下文对象 ctx，其中包含了一些有用的属性，比如 $axios (用于发起 HTTP 请求), store (Vuex store), route (路由信息) 等等。
• 我们使用 $axios 发起一个 GET 请求，获取文章列表。
• asyncData 必须返回一个对象，这个对象会被合并到组件的 data 中。
• 如果请求失败，我们返回一个空数组，避免页面崩溃。

重点： 在 SSR 阶段，asyncData 会在服务器端执行，并将获取到的数据渲染到 HTML 中。这意味着搜索引擎可以直接抓取到页面内容，对 SEO 非常友好。

2. fetch 的用法

假设我们需要在页面加载后，更新 Vuex store 中的用户登录状态：

<template>
  <div>
    <h1>首页</h1>
    <p>用户状态: {{ isLoggedIn ? '已登录' : '未登录' }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['isLoggedIn'])
  },
  async fetch({ store, $axios }) {
    try {
      const response = await $axios.$get('/api/user/status'); // 假设有一个接口返回用户登录状态
      store.commit('SET_LOGGED_IN', response.isLoggedIn);
    } catch (error) {
      console.error('获取用户状态失败:', error);
    }
  }
}
</script>

解析：

• fetch 也是一个异步函数，同样接收上下文对象 ctx。
• 我们使用 $axios 发起一个 GET 请求，获取用户登录状态。
• 我们将获取到的用户登录状态通过 store.commit 更新到 Vuex store 中。
• 注意，fetch 没有 返回值，它不会直接修改组件的 data。

重点： fetch 在 SSR 阶段也会执行，但是它 不会阻塞 渲染。这意味着页面会先渲染出来，然后再执行 fetch 中的逻辑。因此，通过 fetch 获取的数据不会出现在服务器端渲染的 HTML 中。

3. created 的用法

假设我们需要在组件创建时，打印一条日志：

<template>
  <div>
    <h1>组件</h1>
  </div>
</template>

<script>
export default {
  created() {
    console.log('组件被创建了！');
  }
}
</script>

解析：

• created 是一个同步函数，没有接收任何参数。
• 我们直接在 created 钩子中打印一条日志。

重点： created 在 SSR 阶段和 CSR 阶段都会执行。在 SSR 阶段，它会在服务器端执行一次。

三、执行顺序： 谁先谁后？

了解了这三个钩子的区别，接下来我们来搞清楚它们的执行顺序。

SSR 阶段的执行顺序 (页面组件)：

1. asyncData: 首先执行，阻塞渲染，获取页面初始数据。
2. created: asyncData 执行完毕后，组件被创建，created 钩子执行。
3. 虚拟 DOM 渲染: Vue 根据组件的模板和数据，生成虚拟 DOM。
4. 将虚拟 DOM 渲染成 HTML: 将虚拟 DOM 渲染成 HTML 字符串，发送给客户端。
5. fetch: HTML 发送给客户端后，fetch 钩子开始执行，更新 Vuex store 或执行其他副作用操作。

CSR 阶段的执行顺序 (页面组件):

1. created: 组件被创建，created 钩子执行。
2. asyncData (如果存在): 如果页面组件有 asyncData 钩子，则会执行。
3. fetch (如果存在): 如果页面组件有 fetch 钩子，则会执行。

表格总结：

阶段	执行顺序
SSR	asyncData -> created -> 虚拟 DOM 渲染 -> HTML 渲染 -> fetch
CSR (首次)	created -> asyncData -> fetch
CSR (后续)	仅当页面切换或组件重新渲染时，created 可能会再次执行。 asyncData 和 fetch 的执行取决于是否使用了 nuxt-link 或其他方式触发了页面刷新。 如果没有刷新, 则只执行组件内部的生命周期钩子(如 updated, mounted等) , asyncData 和 fetch 不会再次执行.

强调： 理解这个执行顺序非常重要，它可以帮助你更好地控制数据的加载和渲染过程，优化你的 Nuxt 应用。

四、使用场景： 各司其职，物尽其用

不同的钩子有不同的特性，因此适用于不同的场景。

• asyncData:

  • 场景: 获取页面初始化所需的数据，例如文章列表、用户信息、商品详情等。
  • 优点: 阻塞渲染，保证 SEO。
  • 缺点: 如果数据量过大，可能会影响首屏渲染速度。
  • 建议: 尽量减少 asyncData 中请求的数据量，可以使用分页加载等方式优化。

• fetch:

  • 场景: 更新 Vuex store，执行一些副作用操作，例如发送统计数据、更新用户登录状态等。
  • 优点: 不阻塞渲染，不会影响首屏渲染速度。
  • 缺点: 获取的数据不会出现在服务器端渲染的 HTML 中。
  • 建议: 不要在 fetch 中执行复杂的计算逻辑，尽量保持其简洁。

• created:

  • 场景: 执行一些初始化操作，例如设置组件的初始状态，绑定事件监听器等。
  • 优点: 简单易用，服务器端和客户端通用。
  • 缺点: 在 SSR 阶段只执行一次，可能无法满足所有需求。
  • 建议: 避免在 created 中执行耗时的操作，以免影响性能。

五、常见问题： 避坑指南

在使用这些钩子的过程中，可能会遇到一些常见问题，这里给大家总结一下：

1. asyncData 中请求数据失败: 一定要处理错误情况，避免页面崩溃。可以使用 try...catch 语句捕获错误，并返回一个默认值。
2. fetch 中更新 Vuex store 后，页面没有及时更新: 确保你的 Vuex store 中的状态是响应式的。可以使用 Vuex 的 state 和 mutations 来管理状态。
3. 在 created 中访问 $route 或 $store 为 undefined: 这是因为在 SSR 阶段，$route 和 $store 可能还没有被初始化。可以使用 asyncData 或 fetch 来获取这些对象。
4. asyncData 或 fetch 中使用了 this: 在 SSR 阶段，this 指向的是 undefined。请使用上下文对象 ctx 来访问 $axios、store、route 等属性。
5. 内存泄漏: 如果你的组件中使用了事件监听器或定时器，一定要在组件销毁时取消监听或清除定时器，避免内存泄漏。可以使用 beforeDestroy 钩子来执行这些清理操作。

六、高级技巧： 让你的 Nuxt 应用更上一层楼

1. 使用 nuxtServerInit 初始化 Vuex store: 可以在 store/index.js 文件中使用 nuxtServerInit 钩子，在服务器端初始化 Vuex store。这个钩子会在 SSR 阶段的 asyncData 和 fetch 之前执行。

   // store/index.js
   export const actions = {
     nuxtServerInit({ commit }, { req }) {
       if (req.headers.cookie) {
         // 解析 cookie，并设置到 Vuex store 中
         const parsedCookie = require('cookie').parse(req.headers.cookie);
         commit('SET_COOKIE', parsedCookie);
       }
     }
   };

2. 使用 vue-meta 管理页面元信息: 可以使用 vue-meta 插件来管理页面的元信息，例如 title、description、keywords 等。这可以帮助你更好地优化 SEO。

   <template>
     <div>
       <h1>{{ title }}</h1>
     </div>
   </template>
   
   <script>
   export default {
     head() {
       return {
         title: this.title,
         meta: [
           { hid: 'description', name: 'description', content: this.description }
         ]
       };
     },
     data() {
       return {
         title: '我的页面',
         description: '这是我的页面描述'
       };
     }
   };
   </script>

3. 使用缓存: 可以使用缓存来提高 SSR 性能。可以使用 Redis 或 Memcached 等缓存服务器来缓存页面数据。

七、总结： 掌握核心，灵活运用

今天我们深入探讨了 Nuxt.js 中 asyncData、fetch 和 created 这三个钩子的区别、执行顺序和使用场景。希望通过今天的讲解，大家能够更好地理解它们，并在实际开发中灵活运用，打造出高性能、SEO 友好的 Nuxt 应用。

记住，技术是死的，人是活的。不要死记硬背这些概念，要理解它们的本质，并根据实际情况灵活运用。多写代码，多实践，才能真正掌握这些技术。

好了，今天的讲座就到这里。感谢大家的聆听！祝大家早日成为前端大牛！下次再见！