title: Nuxt3 的生命周期和钩子函数(二)

date: 2024/6/26

updated: 2024/6/26

author: cmdragon

excerpt:

摘要:本文深入介绍了Nuxt.js框架中几个关键的生命周期钩子函数,包括app:redirected(SSR环境下重定向前触发)、app:beforeMount(CSR下应用挂载前)、app:mounted(CSR下Vue应用在浏览器挂载时)、app:suspense:resolve(CSR中Suspense组件解析子组件完成时)以及link:prefetch(CSR中NuxtLink预取链接时)和page:start(CSR页面渲染启动时)。通过代码示例展示了如何利用defineNuxtPlugin定义插件并借助nuxtApp.hook监听这些钩子以执行特定任务,强调了各钩子的应用场景及在客户端和服务器端的不同行为。

categories:

  • 前端开发

tags:

  • Nuxt3
  • SSR
  • CSR
  • 钩子函数
  • 生命周期
  • Vue.js
  • 页面渲染



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

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:

link:prefetch

page:start

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜:编程智域 前端至全栈交流与成长,阅读完整的文章:Nuxt3 的生命周期和钩子函数(二) | cmdragon's Blog

往期文章推荐:

往期文章归档:

Nuxt3 的生命周期和钩子函数(二)的更多相关文章

  1. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  2. Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  3. Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  4. [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)

    一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...

  5. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  6. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

  7. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. vue学习(五)生命周期 的钩子函数

    生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...

  9. Vue2.0 【第二季】第4节 Vue的生命周期(钩子函数)

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

  10. vue2.0项目实战(4)生命周期和钩子函数详解

    最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...

随机推荐

  1. 11.Node节点维护

    题目:Node节点维护 配置环境kubectl config use-context ek8s 将名为ek8s-node-0的node节点设置为不可用,并重新调度该node上所有运行的pods. 官方 ...

  2. HttpClient配置SSL绕过https证书以及双向认证

    HttpClient简介 1.HTTP 协议是 Internet 上使用得最多.最重要的协议之一,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java ...

  3. 006_Orcad创建Hetergeneous分裂元件

    006_Orcad创建Hetergeneous分裂元件 以169脚的EMMC为例: 分为两部分,用到的引脚和NC的引脚. 先画一个框,依据引脚功能添加引脚.A部分做好,做B部分.引脚多,可以用pin ...

  4. vue项目hbuilder打包-微信登录调取手机微信登录权限

    这个笔记得做好. 1.vue页面的点击事件 import {login,loginy,wxLog,wxLogin,logout} from '../network/login' wxloginBtn( ...

  5. JavaWeb 中 “转发”与 “重定向”的区别

    JavaWeb 中 "转发"与 "重定向"的区别 每博一文案 人生的常态,就是有聚有散,有得有失,就像山峰一样,总有高低,起伏不断. 曾经,我们是鲜衣怒马的少年 ...

  6. DB2查找最耗时SQL

    两种方法:db2top和snapshot for dynamic sql 1. db2top -d <dbname>

  7. sqli-labs-master 第一关

    Sql注入 基础知识: 一··系统函数; 1. version()--MySQL 版本 2. user()--数据库用户名 3. database()--数据库名 4. @@datadir--数据库路 ...

  8. 解决VMware Workstation 与 Device/Credential Guard不兼容

    参考文档 https://blog.csdn.net/lizhengze1117/article/details/106566060

  9. fastposter v2.11.0 天花板级的海报生成器

    fastposter v2.11.0 天花板级的海报生成器 fastposter海报生成器是一款快速开发海报的工具.只需上传一张背景图,在对应的位置放上组件(文字.图片.二维.头像)即可生成海报. 点 ...

  10. MySQL如何快速获取binlog的开始时间和结束时间

    之前写过一篇文章MySQL如何获取binlog的开始时间和结束时间[1],文章里面介绍了如何获取MySQL数据库二进制日志(binlog)的开始时间与结束时间的一些方法.实际应用当中,我们可能还会遇到 ...