查看: 154|回复: 1

Vue2与Vue3生命周期钩子全解析:选项式与组合式API对比实践

[复制链接]
发表于 2 小时前 | 显示全部楼层 |阅读模式
Vue生命周期是每个Vue开发者必须掌握的核心概念,它定义了实例从创建到销毁的完整过程,并在关键节点提供钩子函数供开发者插入自定义逻辑。本文基于Vue 2和Vue 3的最新稳定版本,详细对比两代框架的钩子差异,同时给出组合式API的实操示例,帮助读者在项目中正确使用。

一、生命周期四大阶段概述

无论Vue 2还是Vue 3,生命周期都划分为四个不可逆的阶段:
- 创建阶段:实例初始化,数据观测与配置完成,但未挂载DOM。
- 挂载阶段:实例渲染到真实DOM,可操作DOM元素。
- 更新阶段:响应式数据变化触发DOM重新渲染,可多次触发。
- 销毁阶段:实例卸载,需清理定时器、事件监听等资源避免内存泄漏。

每个阶段都对应一对钩子(更新阶段除外,同一钩子可多次执行),开发者根据需求选择合适的钩子执行逻辑。

二、Vue 2 生命周期(选项式API)

Vue 2仅支持选项式API,8个钩子无需导入,直接在组件选项中定义即可。执行顺序固定:
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

1. 创建阶段
- beforeCreate:实例刚创建,data、methods、computed均未初始化,无法访问响应式数据。极少使用。
- created:实例初始化完成,可获取data、methods等,但DOM尚未生成($el为undefined)。常用于发起初始化接口请求或数据处理。

2. 挂载阶段
- beforeMount:模板编译完成,虚拟DOM已生成但未挂载到真实DOM。此时无法操作真实DOM。
- mounted:实例挂载完成,真实DOM已渲染,可操作DOM元素、初始化第三方插件等。最常用的钩子之一。

3. 更新阶段
- beforeUpdate:响应式数据已变化但DOM尚未更新,可获取变化前的DOM状态。
- updated:DOM已根据最新数据重新渲染,注意避免在此钩子中修改数据导致无限循环。

4. 销毁阶段
- beforeDestroy:实例即将销毁,组件状态仍然完整。清理定时器、取消请求、解绑事件监听的最佳时机。
- destroyed:实例已销毁,所有指令和事件监听均被解绑,DOM仍存在但实例不再可用。

三、Vue 3 生命周期(选项式与组合式API)

Vue 3兼容Vue 2的选项式API,但更推荐组合式API(setup语法糖)。组合式API的钩子需要从vue中按需导入,函数名以"on"开头。

1. 选项式API(与Vue 2兼容)
用法与Vue 2几乎一致,仅销毁阶段钩子名称更名:
- beforeUnmount(替代beforeDestroy)
- unmounted(替代destroyed)
其他钩子名称、顺序、功能保持不变。示例:
  1. export default {
  2.   data() {
  3.     return { count: 0 }
  4.   },
  5.   created() { /* 初始化 */ },
  6.   mounted() { /* 操作DOM */ },
  7.   beforeUnmount() { /* 清理资源 */ }
  8. }
复制代码

2. 组合式API(setup语法糖)
组合式API的生命周期钩子对应关系如下:
- onBeforeMount(对应beforeMount)
- onMounted(对应mounted,最常用)
- onBeforeUpdate(对应beforeUpdate)
- onUpdated(对应updated)
- onBeforeUnmount(对应beforeDestroy,最常用)
- onUnmounted(对应destroyed)
此外,Vue 3还新增了onRenderTracked和onRenderTriggered两个调试钩子,用于跟踪响应式依赖收集和重新渲染触发条件,日常开发中几乎不用。

实操示例:使用定时器自动累加计数器,并在组件卸载时清理定时器:
  1. <script setup>
  2. import { ref, onMounted, onBeforeUnmount } from 'vue'
  3. const count = ref(0)
  4. let timer = null
  5. onMounted(() => {
  6.   timer = setInterval(() => {
  7.     count.value++
  8.   }, 1000)
  9. })
  10. onBeforeUnmount(() => {
  11.   clearInterval(timer)
  12. })
  13. </script>
复制代码

四、Vue2与Vue3生命周期核心差异

1. API风格:Vue 2只有选项式;Vue 3兼容选项式并推荐组合式。
2. 销毁钩子名称:Vue 2使用beforeDestroy和destroyed;Vue 3选项式使用beforeUnmount和unmounted;组合式使用onBeforeUnmount和onUnmounted。
3. 使用方式:Vue 2钩子直接写对象属性;Vue 3组合式钩子需导入并传入回调函数,更灵活。
4. 调试能力:Vue 3新增的渲染调试钩子为开发测试提供更多信息。

五、实操注意事项

1. 操作真实DOM的时机:仅能在mounted(Vue 2 / Vue 3选项式)或onMounted(Vue 3组合式)以及之后的updated钩子中操作,beforeMount和beforeUpdate时DOM尚未更新。
2. 资源清理:所有定时器、全局事件监听、第三方插件实例必须在beforeDestroy(Vue 2)或onBeforeUnmount(Vue 3)中释放,否则会造成内存泄漏。
3. 接口请求:在created(Vue 2)或setup函数(Vue 3)中发起请求比mounted更早,但无法结合DOM操作;在mounted中发起可配合DOM操作。两种方式均可,根据需求选择。
4. 组件独立性:每个组件实例的生命周期完全独立,多个相同组件各自触发自己的钩子。

六、总结

Vue生命周期是“实例从创建到销毁”的完整过程,核心记忆口诀:“挂载后操作DOM,销毁前清理资源”。Vue 2使用选项式API,适合旧项目维护;Vue 3兼容选项式且推荐组合式,开发效率更高。掌握两代框架的钩子映射关系,就能在项目迁移或新开发中游刃有余。
回复

使用道具 举报

发表于 1 小时前 | 显示全部楼层

Re: Vue2与Vue3生命周期钩子全解析:选项式与组合式API对比实践

感谢楼主分享,总结得非常清晰!Vue2和Vue3生命周期钩子的映射关系以及组合式API的实操示例都很实用。特别是销毁钩子名称变更和资源清理的提醒,对新手很友好。我之前在迁移老项目时总搞混`beforeDestroy`和`onBeforeUnmount`,看了这篇终于理清了。另外,关于在`setup`中直接请求接口和`onMounted`中请求的对比,楼主可以再深入讲讲吗?比如SSR场景下是否有区别?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

指导单位

江苏省公安厅

江苏省通信管理局

浙江省台州刑侦支队

DEFCON GROUP 86025

Hacking Group 021A

旗下站点

态势感知中心

应急响应中心

红盟安全

联系我们

官方QQ群:112851260

官方邮箱:security#ihonker.org(#改成@)

官方核心成员

关注微信公众号

Archiver|手机版|小黑屋| ( 沪ICP备2021026908号 )

GMT+8, 2026-6-12 16:04 , Processed in 0.040396 second(s), 18 queries , Gzip On, Redis On.

Powered by ihonker.com

Copyright © 2015-现在.

  • 返回顶部