Vue3基础知识-生命周期函数onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted - 实践

一、完整代码示例（App.vue）

import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated} from "vue";
export default {
name: 'App',
/*
Vue3的生命周期函数：
1 beforeDestroy改名为beforeUnmount。destroyed改名为unmounted
2 beforeCreate、created相当于setup()
3 写在setup里的生命周期函数名字为：on+原名
*/
setup(){
//setup()函数替代了Vue2的beforeCreate和created。可在此发请求（若不需要依赖DOM）
//模板已编译但未挂载，页面是未编译的dom。{{xx}}不解析。所有对dom的操作最终都不生效
onBeforeMount(()=>{
}),
//虚拟dom转真实dom并挂载到页面，可操作dom。常用于发请求，开定时器，订阅消息，绑定自定义事件等
onMounted(()=>{
}),
//数据更新前。数据新，页面旧
onBeforeUpdate(()=>{
}),
//数据更新后。数据新，页面新
onUpdated(()=>{
}),
//销毁前。可以访问数据和方法，但修改不生效。常用于关闭定时器，取消订阅消息，解绑自定义事件。
onBeforeUnmount(()=>{
}),
//销毁后
onUnmounted(()=>{
})
return{
}
}
}

二、Vue3 生命周期核心变化（对比 Vue2）

Vue2 生命周期（Options API）	Vue3 生命周期（Composition API）	执行时机 & 核心作用
beforeCreate	setup () 函数	组件实例创建后，初始化数据 / 发请求
created	setup () 函数	同 beforeCreate（Vue3 中合并为 setup）
beforeMount	onBeforeMount	DOM 挂载前，模板已编译但未渲染
mounted	onMounted	DOM 挂载后，操作 DOM / 发请求（常用）
beforeUpdate	onBeforeUpdate	内容更新前，数据新、页面旧
updated	onUpdated	内容更新后，材料和页面均为新
beforeDestroy	onBeforeUnmount	组件销毁前，清理副作用（如定时器）
destroyed	onUnmounted	组件销毁后，释放全局资源

关键变化总结：

1. 命名优化：将 “destroy” 改为 “unmount”，更贴合 “卸载 DOM” 的语义；
2. 初始化合并：beforeCreate 和 created 合并为 setup ()，减少冗余；
3. API 风格：需从 vue 显式导入生命周期函数，且前缀为 “on”，符合 Composition API 模块化思想。

三、各生命周期函数实战场景解析

掌握生命周期的核心是 “知道什么时候该做什么事”，以下是每个函数的实战用途和注意事项：

1. setup ()：初始化阶段（替代 beforeCreate/created）

• 执行时机：组件实例创建后立即执行，此时还没有 DOM。
• 核心用途：
  • 初始化响应式数据（如 ref、reactive 定义的数据）；
  • 发送无需依赖 DOM 的网络请求（如获取页面初始化材料）；
  • 定义组件内的函数和技巧。
• 注意：setup () 中没有 this（Vue3 移除了 setup 内的 this 指向），需直接使用导入的 API 和定义的变量。

2. onBeforeMount：DOM 挂载前

• 执行时机：模板编译完成，但真实 DOM 还未挂载到页面。
• 特点：此时能获取到 DOM 元素，但内容是 “未解析的原始模板”（如 {{ count }} 不会被替换为具体值）。
• 注意：不建议在此运行 DOM，因为后续 DOM 挂载会覆盖当前修改，操作无效。

3. onMounted：DOM 挂载后（最常用）

• 执行时机：虚拟 DOM 转为真实 DOM 并挂载到页面，此时 DOM 完全可用。
• 核心用途：
  • 发送依赖 DOM 的网络请求（如根据 DOM 尺寸请求对应分辨率的图片）；
  • 操作 DOM（如初始化图表插件、设置元素样式）；
  • 开启定时器、绑定自定义事件（如 window.scroll 监听）。

4. onBeforeUpdate & onUpdated：内容更新阶段

• 执行时机：响应式数据变化时触发，前者在页面更新前，后者在页面更新后。
• onBeforeUpdate 注意：禁止在此修改响应式数据，否则可能触发新一轮更新，导致无限循环。
• onUpdated 用途：根据更新后的 DOM 做后续操作，比如 “当列表数据更新后，自动滚动到底部”。

5. onBeforeUnmount：组件销毁前（必做清理）

• 执行时机：组件即将被销毁（如路由跳转、组件被移除），但仍可访问组件数据。
• 核心用途：清理副作用（避免内存泄漏），常见场景：
  • 关闭 onMounted 中开启的定时器、计时器；
  • 解绑全局事件监听（如 window.removeEventListener）；
  • 取消未完成的网络请求（如 Axios 取消请求）；
  • 销毁第三方插件实例（如 ECharts 图表实例销毁）。
• 注意：这是清理副作用的 “最后机会”，如果遗漏清理（如未关闭定时器），会导致组件销毁后资源仍在占用，引发内存泄漏。

6. onUnmounted：组件销毁后

• 执行时机：组件完全销毁，DOM 被移除，组件实例被清除。
• 用途：做最终的资源释放，比如取消全局订阅（如 Vuex/Pinia 的订阅）、销毁全局插件实例。
• 注意：此时已无法访问组件内的 DOM 和内容，仅用于全局资源的收尾。

四、注意事项

1. setup () 中无 this：Vue3 明确规定 setup () 内没有 this，若需访问组件实例，可使用 getCurrentInstance()（但不推荐频繁使用，优先通过 Composition API 实现功能）。

2. onUpdated 避免无限循环：onUpdated 中若修改响应式数据，会触发新的更新，导致无限循环。如需修改，需加条件判断（如 “仅当数据满足某个条件时才修改”）。

3. 必须清理副作用：onMounted 中开启的定时器、绑定的事件，务必在 onBeforeUnmount 中清理，否则会导致内存泄漏（尤其在单页应用中，组件频繁切换时问题更明显）。

4. 生命周期函数只能在 setup () 内调用：Vue3 的生命周期函数（如 onMounted）只能在 setup () 函数内调用，若在 setup () 外调用，会报错且无法生效。