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

avatar
cmdragon 渡劫
image image

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

app:redirected

参数:无
环境:服务器端(Server-Side Rendering, SSR)

描述:

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

详细解释:

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

使用示例:

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

1
2
3
4
5
6
7
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()的方式来使用此钩子函数,如下所示:

1
2
3
4
5
6
7
8
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()的方式来使用此钩子函数,如下所示:

1
2
3
4
5
6
7
8
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钩子的示例代码:

1
2
3
4
5
6
7
8
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 页面示例,展示了如何使用Suspenseapp:suspense:resolve钩子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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
钩子会被触发,并打印出解析完成的组件实例。

参数:to

环境:客户端端(Client-Side Rendering, CSR)

描述:

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

详细解释:

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

使用示例:

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

1
2
3
4
5
6
7
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钩子:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 挂起期间进行一些异步操作的初始化,以提高用户体验。

使用示例:

1
2
3
4
5
6
7
8
9
10
11
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(简化版):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 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(),则会在数据加载完成之前挂起页面,直到数据准备好。

往期文章推荐:

往期文章归档: