nuxt 生命周期钩子

在 Nuxt 3 和 Vue 3 中，生命周期钩子函数是控制组件生命周期（从创建到销毁过程中的一系列阶段）的重要部分。虽然 Nuxt 3 是基于 Vue 3 的，但 Nuxt 3 增加了许多特殊的生命周期钩子来帮助处理服务器端渲染（SSR）和客户端渲染（CSR）中的不同场景。

以下是 Nuxt 3 和 Vue 3 的常用生命周期钩子，以及它们的用途和执行时机：

1. Vue 3 生命周期钩子

Vue 3 的生命周期钩子大部分与 Vue 2 相似，但 Vue 3 引入了 Composition API，因此也有新的钩子与 setup() 一起使用。

a. beforeCreate

• 描述: 组件实例刚创建，数据尚未初始化。
• Vue 3: 函数式组件中不常用，通常使用 setup() 来初始化数据。

beforeCreate() {
  console.log('beforeCreate')
}

b. created

• 描述: 组件实例已经创建，数据已经初始化。
• Vue 3: 在 setup() 中创建数据时，不再使用 created()，使用 onMounted() 来代替。

created() {
  console.log('created')
}

c. beforeMount

• 描述: 组件即将挂载到 DOM 上，但还没有实际渲染。
• Vue 3: 同样可以在 setup() 中使用 onBeforeMount()。

beforeMount() {
  console.log('beforeMount')
}

d. mounted

• 描述: 组件已经挂载到 DOM 上，此时可以进行 DOM 操作。
• Vue 3: 使用 onMounted()。

mounted() {
  console.log('mounted')
}

e. beforeUpdate

• 描述: 组件的数据发生变化，DOM 即将更新前调用。
• Vue 3: 使用 onBeforeUpdate()。

beforeUpdate() {
  console.log('beforeUpdate')
}

f. updated

• 描述: 组件的数据发生变化，DOM 更新后调用。
• Vue 3: 使用 onUpdated()。

updated() {
  console.log('updated')
}

g. beforeUnmount

• 描述: 组件即将卸载。
• Vue 3: 使用 onBeforeUnmount()。

beforeUnmount() {
  console.log('beforeUnmount')
}

h. unmounted

• 描述: 组件已经卸载。
• Vue 3: 使用 onUnmounted()。

unmounted() {
  console.log('unmounted')
}

i. errorCaptured

• 描述: 捕获子组件中的错误。
• Vue 3: 使用 onErrorCaptured()。

errorCaptured(err, vm, info) {
  console.log(err, vm, info)
}

2. Nuxt 3 特有生命周期钩子

Nuxt 3 在 Vue 3 的基础上，增加了一些生命周期钩子，用于处理服务器端渲染（SSR）和客户端渲染（CSR）的一些特殊情况。

a. asyncData

• 描述: 在组件或页面加载时异步获取数据，支持 SSR。
• 执行时机: 在组件渲染前执行，可以异步加载数据并传递给组件。

export default {
  async asyncData({ params }) {
    const data = await fetchDataFromAPI(params.id)
    return { data }
  }
}

• asyncData 允许你在页面加载之前获取数据，并返回数据对象。该数据将自动与组件的数据合并。

b. fetch

• 描述: 与 asyncData 类似，但是 fetch 只在客户端执行。
• 执行时机: 用于在组件加载时获取数据，支持 SSR 和 CSR，但在 SSR 阶段不会等待数据。

export default {
  async fetch() {
    this.data = await fetchDataFromAPI()
  }
}

c. onBeforeMount (Nuxt 3)

• 描述: 与 Vue 的 beforeMount 类似，但适用于 Nuxt 的服务端渲染场景。
• 执行时机: 页面渲染前，服务端渲染或客户端渲染时都会执行。

onBeforeMount() {
  console.log('before mounting')
}

d. onMounted (Nuxt 3)

• 描述: 与 Vue 的 mounted 相同，组件已经挂载，可以进行 DOM 操作。
• 执行时机: 客户端渲染完成后触发。

onMounted() {
  console.log('mounted')
}

e. onBeforeUnmount (Nuxt 3)

• 描述: 与 Vue 的 beforeUnmount 相同，组件即将卸载。
• 执行时机: 组件销毁之前。

onBeforeUnmount() {
  console.log('before unmounting')
}

f. onErrorCaptured (Nuxt 3)

• 描述: 用于捕获错误并提供错误边界功能。
• 执行时机: 捕获组件树中发生的错误。

onErrorCaptured((err, vm, info) => {
  console.log(err, info)
  return false // 阻止错误继续传播
})

3. Nuxt 3 页面级生命周期钩子

这些钩子用于页面的生命周期，特别是在服务端和客户端渲染时的不同需求。

a. definePageMeta

• 描述: 设置页面元数据，如标题、描述、图标等。
• 执行时机: 运行时动态设置页面信息。

export default {
  definePageMeta() {
    return {
      title: 'My Page Title',
      description: 'This is a page description',
    }
  }
}

b. defineNuxtRouteMiddleware

• 描述: 在页面路由发生之前运行，常用于路由守卫。
• 执行时机: 路由跳转时，特别适用于认证、权限控制等场景。

export default defineNuxtRouteMiddleware((to, from) => {
  if (!isAuthenticated()) {
    return navigateTo('/login')
  }
})

c. useState (React-like state management)

• 描述: 用于跨页面或组件共享状态。
• 执行时机: 用于在组件或页面中持久化共享的状态。

const counter = useState('counter', () => 0)

总结

• Vue 3 生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。
• Nuxt 3 生命周期钩子：除了 Vue 3 的生命周期钩子，还提供了一些 Nuxt 特有的钩子，如 asyncData、fetch、definePageMeta、defineNuxtRouteMiddleware。
• setup() 中的 Composition API 钩子如 onBeforeMount、onMounted、onBeforeUnmount、onUnmounted 等，结合了 Vue 3 的新特性，提供更清晰和简洁的生命周期管理方式。

这些钩子有助于在不同的生命周期阶段执行特定的操作，在服务端渲染、客户端渲染、错误捕获等场景中灵活应用。