发帖
雷达卡
作为 Vue3 系列的第八篇文章，本文将重点解析 Vue3 中组件的生命周期机制。理解生命周期，就如同观察一个人从诞生、成长、经历变迁到最终退出的过程，每个阶段都承载着独特的职责与意义。掌握这些关键节点，有助于我们在恰当的时机执行必要的逻辑，从而开发出更高效、更稳定的 Vue 应用程序。
一、深入理解组件生命周期
以人生阶段类比组件生命周期
为了更直观地理解组件的生命周期，我们可以将其比作人类的生命历程：
出生阶段（创建）
组件刚刚被实例化，类似于婴儿初临人世。此时它已具备基本结构和能力，但尚未出现在页面中，也无法与用户产生交互。
成长阶段（挂载）
这一时期相当于个体开始融入社会。组件被插入 DOM 树中，正式进入可视区域，能够渲染内容并响应用户操作，如同孩子入学、结识同伴、参与活动。
变化阶段（更新）
人生充满变数，如职业转换、技能提升等；同样，当组件内部的数据发生变化时，它会触发重新渲染，以展示最新的状态信息。
离别阶段（卸载）
生命终有尽头，组件亦然。当其不再被需要时，将被销毁，并释放所占用的内存资源，移除事件监听，为彻底退出做准备。
组件四大核心生命周期阶段
- 创建阶段（Creation）：组件实例初始化完成，但尚未挂载至 DOM。
- 挂载阶段（Mounting）：组件被渲染并插入到真实 DOM 中，开始与用户交互。
- 更新阶段（Updating）：数据变更引发视图重绘，确保界面与状态同步。
- 卸载阶段（Unmounting）：组件被移除前进行清理工作，防止内存泄漏。
在特定时刻执行特定操作的价值
生命周期的本质在于精准控制代码执行时机，就像人在不同人生阶段做出关键决策：
- 出生时：准备生存所需的基本条件
- 求学时：积累知识与能力
- 工作时：发挥价值创造成果
- 退休时：总结过往，妥善收尾
在组件开发中，我们通过生命周期钩子实现：
- 在创建时初始化数据模型
- 在挂载完成后访问或操作 DOM 元素
- 在更新前后处理业务逻辑
- 在卸载前清除定时器、解绑事件等资源
<script setup>二、Vue2 生命周期详解
创建阶段：beforeCreate() 与 created()
以下是一个简单的计数器组件示例，用于演示 Vue2 的生命周期行为：
<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
接下来，我们在该组件中加入创建阶段的两个生命周期钩子函数：
<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
// 创建阶段开始 - 组件实例刚被创建
beforeCreate() {
console.log('beforeCreate - 组件实例刚创建')
console.log('数据 count:', this.count) // undefined
console.log('方法 increment:', this.increment) // undefined
},
// 创建阶段完成 - 数据观测和事件配置已完成
created() {
console.log('created - 数据观测已完成')
console.log('数据 count:', this.count) // 0
console.log('方法 increment:', this.increment) // 函数
},
methods: {
increment() {
this.count++
}
}
}
</script>
创建阶段详细说明
beforeCreate()
- 触发时机：组件实例刚刚被创建后立即调用
- 当前状态：data 和 methods 尚未初始化，无法访问
- 典型用途：多用于插件开发或全局前置处理，常规业务中使用较少
created()
- 触发时机：组件实例创建完毕，数据代理和方法绑定已完成
- 当前状态：可访问 data、methods、computed 等选项，但模板尚未编译，DOM 节点还未生成
- 典型用途：适合发起异步请求、初始化数据、设置初始状态等无需操作 DOM 的任务
这个阶段如同婴儿初生，具备了基本的生命特征（数据与方法），但尚未与外界产生交互（DOM 操作）。
挂载阶段：beforeMount() 与 mounted()
接下来我们深入分析挂载阶段的两个关键生命周期钩子函数：
<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
// 挂载阶段开始 - 模板编译完成，即将挂载到 DOM
beforeMount() {
console.log('beforeMount - 模板编译完成，即将挂载')
console.log('DOM 元素:', this.$el) // undefined，因为还没挂载
},
// 挂载阶段完成 - 组件已挂载到 DOM
mounted() {
console.log('mounted - 组件已挂载到 DOM')
console.log('DOM 元素:', this.$el) // 实际的 DOM 元素
console.log('计数元素:', this.$el.querySelector('p').textContent)
},
methods: {
increment() {
this.count++
}
}
}
</script>
<script setup>关于 beforeMount()
- 时机：在组件挂载开始前触发，此时模板已完成编译
- 状态：虚拟 DOM 已生成，但尚未转化为真实 DOM 节点
- 用途：适合执行首次渲染前的最终准备工作
关于 mounted()
- 时机：组件已成功挂载至真实 DOM 后调用
- 状态：组件完全初始化完毕，可安全访问 $el 和其他 DOM 元素
- 用途：常用于初始化第三方插件、设置定时器、绑定事件监听等需要操作 DOM 的场景
这一阶段好比个体步入社会，获得了与外部世界互动的能力，可以真正施展其功能。
更新阶段：beforeUpdate() 与 updated()
当组件内部响应式数据发生变化时，将触发更新周期。以下代码展示了该过程：
<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
// 更新阶段开始 - 数据变化，虚拟 DOM 重新渲染之前
beforeUpdate() {
console.log('beforeUpdate - 数据已变化，即将重新渲染')
console.log('当前计数:', this.count)
console.log('DOM 内容:', this.$el.querySelector('p').textContent)
},
// 更新阶段完成 - 虚拟 DOM 已重新渲染并更新到真实 DOM
updated() {
console.log('updated - 组件已更新')
console.log('当前计数:', this.count)
console.log('DOM 内容:', this.$el.querySelector('p').textContent)
},
methods: {
increment() {
this.count++
}
}
}
</script>
beforeDestroybeforeUpdate() 解析
- 时机：响应式数据变更后，虚拟 DOM 重新渲染前执行
- 状态：数据已是最新值，但视图尚未更新
- 用途：可用于记录旧状态或执行更新前的逻辑处理
updated() 解析
- 时机：虚拟 DOM 重新渲染且页面已更新完成后调用
- 状态：DOM 结构已同步反映最新的数据状态
- 用途：适用于依赖最新 DOM 布局的操作，例如元素尺寸测量或滚动位置调整
此阶段象征着人在生活中持续学习与成长，不断适应新环境与挑战的过程。
销毁阶段：beforeDestroy() 与 destroyed()
当组件被移除不再使用时，会进入销毁流程：
<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
<button @click="$destroy()">销毁组件</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
onBeforeUnmountbeforeDestroy() 特点
- 时机：在实例被销毁之前调用
- 状态：组件仍处于完全可用状态，所有指令、事件监听依然有效
- 用途：清理工作首选阶段，如取消定时器、解绑全局事件、销毁手动创建的 DOM 节点等
destroyed() 特点
- 时机：组件已被完全销毁后触发
- 状态：所有与实例相关的绑定已被解除，DOM 已从页面中移除（若未被复用）
- 用途：作为最终确认点，验证资源是否释放完毕
这个阶段类似于人生旅程的结束，所有的职责和联系都被逐步解除，系统资源得以回收。
<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
// 挂载前钩子
onBeforeMount(() => {
console.log('onBeforeMount - 即将挂载到 DOM')
console.log('DOM 元素还未可用')
})
// 挂载后钩子
onMounted(() => {
console.log('onMounted - 已挂载到 DOM')
console.log('现在可以操作 DOM 元素')
const countElement = document.querySelector('p')
console.log('计数元素:', countElement.textContent)
})
</script>
<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script setup>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
// 在 Vue3 的 <script setup> 中，顶层代码会立即执行
console.log('这相当于在 created 阶段执行')
console.log('数据 count:', count.value)
console.log('方法 increment:', increment)
</script>
<template>
<div>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
京公网安备 11010802022788号
