vue3 生命周期钩子

在 Vue 3 中,可以在组件不同阶段的生命周期执行特定逻辑。
生命周期整体分为四个阶段:创建挂载更新卸载

创建阶段

setup()

  • 这是组合式 API 的入口点,在组件实例创建之前被调用。
  • 在此阶段,可以初始化响应式数据、定义方法等。但不能使用 this,因为它不是传统选项式 API 的上下文。
  • 可以通过 import { reactive, ref } from 'vue'; 导入响应式函数来创建响应式数据。

挂载阶段

onBeforeMount()

注册一个钩子,在组件被挂载之前被调用。

  • 作用
    • 通常用于在组件挂载之前进行一些初始化操作,这些操作不依赖于 DOM 元素的存在。
    • 例如,可以在这个阶段进行数据的预加载、初始化一些变量或者设置一些状态,为组件的挂载做好准备。
  • 执行时机
    • 在组件的 setup 函数执行之后,以及组件真正被挂载到 DOM 之前调用。
      当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点,不能访问到 DOM 元素。它即将首次执行 DOM 渲染过程。
  • 注意事项
    • onBeforeMount() 阶段,组件尚未被挂载到 DOM,所以无法直接访问 DOM 元素。
  • 这个钩子在服务器端渲染期间不会被调用

onMounted()

注册一个回调函数,在组件挂载完成后执行。

  • 作用
    • 主要用于在组件被渲染并插入到 DOM 后,执行一些需要访问 DOM 元素或进行依赖 DOM 操作的任务。
    • 例如,可以在这个阶段初始化第三方库、设置元素的初始状态、添加事件监听器等。
  • 执行时机
    • 在组件挂载到 DOM 后调用。意味着在组件及组件的所有子组件都被挂载之后调用。可以确保在 onMounted 中访问子组件的 DOM 元素是安全的。
  • 组件在以下情况下被视为已挂载
    • 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
    • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。
  • 这个钩子在服务器端渲染期间不会被调用

更新阶段

onBeforeUpdate()

注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

  • 作用
    • 可以在这个阶段获取到组件更新前的状态,以便进行一些特定的处理或记录。
    • 例如,可以在这个阶段保存一些当前的状态信息,以便在更新后进行比较或恢复。
  • 执行时机
    • 当响应式数据发生变化,并且 Vue 检测到需要更新组件时,在实际更新之前调用onBeforeUpdate
  • 注意事项
    • onBeforeUpdate应该快速执行,避免进行耗时的操作,因为这可能会延迟组件的更新。
    • onBeforeUpdate通常与onUpdated一起使用,以便在更新前后进行相应的处理。
  • 这个钩子在服务器端渲染期间不会被调用

onUpdated()

注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。
在组件更新完成后执行。

  • 作用

    • 主要用于在组件的响应式数据变化导致重新渲染后执行一些操作。
    • 可以在这个阶段安全地访问和操作更新后的 DOM 元素。
  • 执行时机

    • 在组件的 DOM 更新完成后调用。
    • 父组件的更新钩子将在其子组件的更新钩子之后调用。
  • 注意事项

    • 不要在 updated 钩子中更改组件的状态,这可能会导致无限的更新循环!
    • 如果需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick()
  • 这个钩子在服务器端渲染期间不会被调用

卸载阶段

onBeforeUnmount()

注册一个钩子,在组件实例被卸载之前调用。

  • 作用

    • 主要用于在组件被销毁之前进行一些清理操作,例如取消订阅事件、清除定时器、移除 DOM 事件监听器等,以避免内存泄漏和不必要的资源占用。
    • 可以在这个阶段保存一些组件的状态信息,以便在后续可能的重新创建中恢复。
  • 执行时机

    • 在组件即将被卸载,即从 DOM 中移除之前调用。此时组件的 DOM 元素仍然存在,可以被访问到。
  • 注意事项

    • 当这个钩子被调用时,组件实例依然还保有全部的功能。
    • onBeforeUnmount中进行清理操作时,要确保所有的资源都被正确地释放,以避免内存泄漏和其他潜在的问题。
    • 这个钩子函数应该快速执行,避免进行耗时的操作,因为这可能会延迟组件的卸载过程。
  • 这个钩子在服务器端渲染期间不会被调用

Vue 3中,生命周期钩子函数有一些变化。下面是Vue 3中常用的几个生命周期钩子函数: 1. beforeCreate:在实例创建之前被调用。此时,实例的属性和方法都还没有被初始化。 2. created:在实例创建完成之后被调用。此时,实例的属性和方法已经被初始化,但DOM还未挂载。 3. beforeMount:在实例挂载之前被调用。此时,模板编译完成,但还未将模板渲染成真实的DOM。 4. mounted:在实例挂载完成之后被调用。此时,模板已经被渲染成真实的DOM,并且可以访问到DOM元素。 5. beforeUpdate:在组件更新之前被调用。此时,组件的数据已经发生了变化,但尚未重新渲染DOM。 6. updated:在组件更新完成之后被调用。此时,组件的数据已经变化并且DOM已经更新。 7. beforeUnmount:在组件卸载之前被调用。此时,组件即将从DOM中被移除。 8. unmounted:在组件卸载完成之后被调用。此时,组件已经从DOM中移除,不再被使用。 需要注意的是,Vue 3中废弃了一些旧的生命周期钩子函数,如beforeDestroy和destroyed,取而代之的是beforeUnmount和unmounted。这是因为Vue 3引入了组合式API,为了统一生命周期函数的命名和行为。 这些生命周期钩子函数可以让我们在不同的阶段执行一些逻辑操作,比如初始化数据、发送网络请求、订阅事件等。通过合理使用生命周期钩子函数,我们可以更好地控制组件的生命周期和行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue3 -- 生命周期函数(钩子)](https://blog.csdn.net/m0_47901007/article/details/118498206)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vue 3.0 生命周期/钩子函数](https://blog.csdn.net/m0_51691013/article/details/118536879)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值