Nuxt3 的生命周期和钩子函数（二）

扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

app:redirected

参数：无
环境：服务器端（Server-Side Rendering, SSR）

描述：

在 Nuxt.js 中，app:redirected是一个钩子函数，它会在服务器端渲染（SSR）重定向（redirect）之前被调用。

详细解释：

在 Nuxt.js 应用程序中，可以使用钩子函数来在特定的生命周期事件中执行自定义的 JavaScript 代码。app:redirected
钩子函数在服务器端渲染（SSR）期间，在重定向（redirect）发生前被调用。

使用示例：

可以使用export default defineNuxtPlugin()的方式来使用此钩子函数，如下所示：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:redirected', () => {
    // 在这里编写重定向前需要执行的代码
    console.log('重定向前执行的代码...')
  })
})

在上面的示例中，我们使用defineNuxtPlugin()函数来注册一个插件，并在插件函数中使用nuxtApp.hook()
函数来注册app:redirected钩子函数。在钩子函数中，我们可以编写重定向前需要执行的代码。

需要注意的是，app:redirected钩子函数只会在服务器端渲染（SSR）期间被调用，因此在客户端渲染（Client-Side Rendering,
CSR）期间是不会被调用的。

app:beforeMount

参数：vueApp

环境：客户端端（Client-Side Rendering, CSR）

描述：

在 Nuxt.js 中，app:beforeMount是一个钩子函数，它会在应用程序挂载之前被调用，仅在客户端端调用。

详细解释：

在 Nuxt.js 应用程序中，可以使用钩子函数来在特定的生命周期事件中执行自定义的 JavaScript 代码。app:beforeMount
钩子函数会在应用程序挂载之前被调用，且仅在客户端端（Client-Side Rendering, CSR）调用。

使用示例：

可以使用export default defineNuxtPlugin()的方式来使用此钩子函数，如下所示：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:beforeMount', (vueApp) => {
    // 在这里编写应用程序挂载前需要执行的代码
    console.log('应用程序挂载前执行的代码...')
    console.log(vueApp)
  })
})

在上面的示例中，我们使用defineNuxtPlugin()函数来注册一个插件，并在插件函数中使用nuxtApp.hook()
函数来注册app:beforeMount钩子函数。在钩子函数中，我们可以编写应用程序挂载前需要执行的代码，并可以通过vueApp参数获取
Vue.js 应用程序实例。

需要注意的是，app:beforeMount钩子函数仅在客户端端渲染（Client-Side Rendering, CSR）期间被调用，因此在服务器端渲染（Server-Side
Rendering, SSR）期间是不会被调用的。

app:mounted

参数：vueApp

环境：客户端端（Client-Side Rendering, CSR）

描述：

在 Nuxt.js 中，app:mounted是一个钩子函数，它会在 Vue 应用程序初始化并在浏览器中挂载时调用，仅在客户端端调用。

详细解释：

在 Nuxt.js 应用程序中，可以使用钩子函数来在特定的生命周期事件中执行自定义的 JavaScript 代码。app:mounted钩子函数会在 Vue
应用程序初始化并在浏览器中挂载时被调用，且仅在客户端端（Client-Side Rendering, CSR）调用。

使用示例：

可以使用export default defineNuxtPlugin()的方式来使用此钩子函数，如下所示：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:mounted', (vueApp) => {
    // 在这里编写 Vue 应用程序初始化并在浏览器中挂载时需要执行的代码
    console.log('Vue 应用程序初始化并在浏览器中挂载时执行的代码...')
    console.log(vueApp)
  })
})

在上面的示例中，我们使用defineNuxtPlugin()函数来注册一个插件，并在插件函数中使用nuxtApp.hook()函数来注册app:mounted
钩子函数。在钩子函数中，我们可以编写 Vue 应用程序初始化并在浏览器中挂载时需要执行的代码，并可以通过vueApp参数获取 Vue.js
应用程序实例。

需要注意的是，app:mounted钩子函数仅在客户端端渲染（Client-Side Rendering, CSR）期间被调用，因此在服务器端渲染（Server-Side
Rendering, SSR）期间是不会被调用的。

app:suspense:resolve

参数：appComponent

环境：客户端端（Client-Side Rendering, CSR）

描述：

在 Nuxt.js 应用程序中，app:suspense:resolve是一个钩子函数，它会在Suspense组件解析其子组件时调用。此钩子仅在客户端端（CSR）执行。

详细解释：

Suspense是 Vue 3 引入的一个用于处理异步组件和异步依赖的组件。在 Nuxt.js 中，你可以使用app:suspense:resolve
钩子来监听Suspense组件解析其子组件的事件。当Suspense组件的子组件全部解析完成时，此钩子会被触发。

使用示例：

以下是如何使用export default defineNuxtPlugin()方式注册app:suspense:resolve钩子的示例代码：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:suspense:resolve', (appComponent) => {
    // 在这里编写当 Suspense 解析事件发生时需要执行的代码
    console.log('Suspense 组件解析完成，子组件已准备就绪...')
    console.log(appComponent)
  })
})

在上面的代码中，我们注册了一个插件并在插件内部使用nuxtApp.hook()方法来监听app:suspense:resolve事件。当Suspense
组件解析其子组件时，会调用这个钩子函数，并传入appComponent参数，该参数是解析完成的组件实例。

案例 Demo：

以下是一个简单的 Nuxt.js 页面示例，展示了如何使用Suspense和app:suspense:resolve钩子：

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:suspense:resolve', (appComponent) => {
    console.log('Suspense 解析完成:', appComponent);
  });
});

// 假设这是一个异步组件
const AsyncComponent = defineAsyncComponent(() =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: `<div>Async Component</div>`,
      });
    }, 2000);
  })
);
</script>

在这个示例中，AsyncComponent是一个异步组件，它会在 2 秒后解析。Suspense组件包裹了AsyncComponent
，并提供了一个#fallback插槽用于在组件加载期间显示加载提示。当异步组件解析完成后，app:suspense:resolve
钩子会被触发，并打印出解析完成的组件实例。

link:prefetch

参数：to

环境：客户端端（Client-Side Rendering, CSR）

描述：

在 Nuxt.js 应用程序中，link:prefetch是一个钩子函数，它会在当观察到<NuxtLink>被预取时调用。此钩子仅在客户端端（CSR）执行。

详细解释：

当 Nuxt.js 应用程序中的<NuxtLink>组件被点击或在其附近滚动时，Nuxt.js
会自动预取链接指向的页面。在这个过程中，link:prefetch钩子会被触发，并传入to参数，其中包含了当前正在预取的链接的目标路由。

使用示例：

以下是如何使用export default defineNuxtPlugin()方式注册link:prefetch钩子的示例代码：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('link:prefetch', (to) => {
    // 在这里编写当 <NuxtLink> 被预取时需要执行的代码
    console.log('正在预取链接:', to.path);
  });
});

在上面的代码中，我们注册了一个插件并在插件内部使用nuxtApp.hook()方法来监听link:prefetch事件。当<NuxtLink>
被预取时，会调用这个钩子函数，并传入to参数，其中包含了当前正在预取的链接的目标路由。

案例 Demo：

以下是一个简单的 Nuxt.js 页面示例，展示了如何使用link:prefetch钩子：

<template>
  <div>
    <NuxtLink to="/about">About</NuxtLink>
  </div>
</template>

<script>
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('link:prefetch', (to) => {
    console.log('正在预取链接:', to.path);
  });
});
</script>

在这个示例中，我们在页面中添加了一个<NuxtLink>组件，指向/about路由。当这个链接被预取时，link:prefetch
钩子会被触发，并在控制台中打印出当前正在预取的链接的路径。

page:start

参数：pageComponent

环境：客户端端（Client-Side Rendering, CSR）

描述：

page:start是 Nuxt.js 中的一个钩子，它在客户端页面渲染（包括 Suspense 挂起时）开始时被调用。当页面组件（pageComponent
）开始加载时，这个钩子会被触发。pageComponent参数通常是一个 Vue 组件实例，代表即将渲染的页面。

详细解释：

在 Nuxt.js 中，page:start钩子主要用于在页面开始加载时执行一些初始化操作，例如数据预加载、路由守卫（如
beforeRouteEnter）的执行，或者在 Suspense 挂起期间进行一些异步操作的初始化，以提高用户体验。

使用示例：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', async (pageComponent) => {
    // 在这里执行页面加载开始时的逻辑
    console.log('页面开始加载:', pageComponent.$options.name);
    if (pageComponent.$options.name === 'suspensePage') {
      // 对于 Suspense 挂起的页面，可以在这里做额外处理
      await someAsyncFunction();
    }
  });
});

在上面的代码中，我们注册了一个插件，当页面开始加载时，page:start钩子会被调用。如果页面组件是suspensePage
，则执行异步函数someAsyncFunction()，以在 Suspense 挂起期间进行初始化。

案例 Demo（简化版）：

<!-- pages/suspensePage.vue -->
<template>
  <Suspense>
    <div v-if="dataLoaded">Suspense 解除后的内容</div>
    <div v-else>Loading...</div>
  </Suspense>
</template>

<script>
export default {
  data() {
    return { dataLoaded: false };
  },
  async mounted() {
    await this.fetchData();
  },
  async fetchData() {
    // 异步获取数据
    // ...
    this.dataLoaded = true;
  },
};
</script>

在这个示例中，suspensePage.vue是一个 Suspense 挂起的页面。当页面开始加载时，page:start钩子会检查是否为suspensePage
，然后在fetchData方法中进行数据加载，确保数据在 Suspense 解除后显示。如果在page:start
钩子中执行了await someAsyncFunction()，则会在数据加载完成之前挂起页面，直到数据准备好。

往期文章推荐：

往期文章归档：

• Nuxt3 的生命周期和钩子函数（一） | cmdragon’s Blog
• 初学者必读：如何使用 Nuxt 中间件简化网站开发 | cmdragon’s Blog
• 深入探索 Nuxt3 Composables：掌握目录架构与内置API的高效应用 | cmdragon’s Blog
• 掌握 Nuxt 3 中的状态管理：实践指南 | cmdragon’s Blog
• Nuxt 3 路由系统详解：配置与实践指南 | cmdragon’s Blog
• Nuxt 3组件开发与管理 | cmdragon’s Blog
• Nuxt3页面开发实战探索 | cmdragon’s Blog
• Nuxt.js 深入浅出：目录结构与文件组织详解 | cmdragon’s Blog
• 安装 Nuxt.js 的步骤和注意事项 | cmdragon’s Blog
• 探索Web Components | cmdragon’s Blog
• Vue微前端架构与Qiankun实践理论指南 | cmdragon’s Blog
• Vue 3深度探索：自定义渲染器与服务端渲染 | cmdragon’s Blog