joken-前端工程师

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::

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

以下是 Nuxt 3Vue 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 生命周期钩子:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted
  • Nuxt 3 生命周期钩子:除了 Vue 3 的生命周期钩子,还提供了一些 Nuxt 特有的钩子,如 asyncDatafetchdefinePageMetadefineNuxtRouteMiddleware
  • setup() 中的 Composition API 钩子如 onBeforeMountonMountedonBeforeUnmountonUnmounted 等,结合了 Vue 3 的新特性,提供更清晰和简洁的生命周期管理方式。

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

posted on   joken1310  阅读(9)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示