vue的生命周期到底是什么？
这里举一个例子，人的一生有出生到死亡的过程，vue也有产生到销毁的过程
vue的生命周期就是vue组件创建到销毁的过程，即vue的一生
在vue中，主要包含8个生命周期钩子
生命周期钩子=生命周期函数=生命周期事件
在此之前，了解data的数据，el是DOM即浏览器页面内容
beforeCreate（创建前）：在 Vue 实例初始化后，数据观测和事件配置前调用，此时 el 和 data 并未初始化，因此无法访问 methods、computed 等方法和数据。（el和data都没有）
created（创建后）：Vue 实例创建后被立即调用即 HTML 加载完成前。此时，Vue 实例已完成数据观测、属性和方法的运算、watch/event 事件回调、data 数据的初始化。然而，挂载阶段还没有开始，el 属性目前不可见。这是一个常用的生命周期钩子函数，可以调用 methods 中的方法、改变 data 中的数据、获取 computed 中的计算属性等，通常在此钩子函数中对实例进行预处理。（有data无el）
beforeMount（载入前）：挂载开始前被调用，Vue 实例已完成编译模板、把 data 里面的数据和模板生成 HTML、el 和 data 初始化，注意此时还没有挂载 HTML 到页面上。（有data无el）
mounted（载入后）：页面加载后调用该函数，这是一个常用的生命周期钩子函数，一般是第一个业务逻辑在此钩子开始，mounted 只会执行一次。（data和el都有）
beforeUpdate（更新前）：在数据更新前被调用，发生在虚拟 DOM 重新渲染和打补丁之前，可以在该钩子中进一步更改状态，不会触发附加的重渲染过程。（data和el都有）
updated（更新后）：在由数据更改导致虚拟 DOM 重新渲染和打补丁时调用，调用时，DOM 已经更新，所以可以执行依赖于 DOM 的操作，应该避免在此期间更改状态，这可能会导致更新无限循环。（data和el都有）
beforeUnmount/beforeDestory（销毁前）：Vue 实例销毁前调用（离开页面前调用），这是一个常用的生命周期钩子函数，一般在此时做一些重置的操作，例如清除定时器和监听的 DOM 事件。（data和el都有）
unmounted/Destoryed（销毁后）：在实例销毁后调用，调用后，事件监听器被移出，所有子实例也被销毁。（data和el都有）
beforeCreate：实例创建前，此时el和data都未初始化
created：实例创建后，data已初始化，但el未挂载
beforeMount：挂载前，el已编译为虚拟DOM，但未挂载到页面
mounted：挂载后，el已挂载到页面，可访问真实DOM
beforeUpdate：数据更新前，el和data都是旧值
updated：数据更新后，el和data都是新值
beforeUnmount：卸载前，el和data都还可用
unmounted：卸载后，el和data都不可用
代码示例
在vue中输入以下代码进行测试
<template> <div v-if="isShow" class="hook-test"> <p>当前计数：{{ count }}</p> <button @click="count++">更新数据</button> <button @click="isShow = false">销毁组件</button> </div> </template> <script> export default { name: "Vue3HookTest", data() { return { count: 0, // 测试更新的响应式数据 isShow: true // 控制组件挂载/卸载 }; }, // 1. 创建前 beforeCreate() { console.log("===== beforeCreate ====="); console.log("el：", this.$el); console.log("data：", this.$data); }, // 2. 创建后 created() { console.log("===== created ====="); console.log("el：", this.$el); console.log("data：", this.$data); }, // 3. 挂载前 beforeMount() { console.log("===== beforeMount ====="); console.log("el：", this.$el); console.log("data：", this.$data); }, // 4. 挂载后 mounted() { console.log("===== mounted ====="); console.log("el：", this.$el); console.log("data：", this.$data); }, // 5. 更新前 beforeUpdate() { console.log("===== beforeUpdate ====="); console.log("el：", this.$el); console.log("data：", this.$data); }, // 6. 更新后 updated() { console.log("===== updated ====="); console.log("el：", this.$el); console.log("data：", this.$data); }, // 7. 卸载前（Vue3 替换 beforeDestroy） beforeUnmount() { console.log("===== beforeUnmount ====="); console.log("el：", this.$el); console.log("data：", this.$data); }, // 8. 卸载后（Vue3 替换 destroyed） unmounted() { console.log("===== unmounted ====="); console.log("el：", this.$el); console.log("data：", this.$data); } }; </script> <style scoped> .hook-test { padding: 20px; border: 1px solid #eee; margin: 20px; } button { margin: 0 10px; padding: 5px 10px; cursor: pointer; } </style>代码运行后，浏览器页面如下
此时我们可以看出，el直到mounted后才出现，data在created后才出现
现在让数字+1发现，el改变，即el进行了更新
之后进行销毁，发现组件消失，页面el和data已经清除，但仍然存在
el不再指向任何对象
data还可以访问到数据对象，但组件实例已销毁，数据不再具有响应式能力，也不再触发更新钩子
代码输出总结
1.beforeCreate（创建前）
- 执行时机：Vue 实例初始化之后，数据观测（响应式处理）、方法 / 事件配置之前。
- 输出结果：
el：undefined（此时还未开始处理 DOM，没有根元素）。data：undefined（data 还未被初始化，响应式系统未启动）。
- 阶段特征：实例仅完成最基础的初始化，核心的响应式数据、方法、DOM 都未就绪。
2.created（创建后）
- 执行时机：Vue 实例创建完成后，已完成数据观测、方法 / 事件配置，但 DOM 挂载还未开始。
- 输出结果：
el：undefined（仍未处理 DOM，模板还未编译渲染）。data：{ count: 0, isShow: true }（data 已初始化，响应式系统生效，可访问 / 修改数据）。
- 阶段特征：可操作数据和方法，但不能操作 DOM（因为 DOM 还未生成）。
3.beforeMount（挂载前）
- 执行时机：模板编译完成，虚拟 DOM 已生成，即将挂载到页面真实 DOM 中。
- 输出结果：
el：Vue3 中此处为undefined（与 Vue2 不同）（Vue3 在beforeMount阶段还未创建真实 DOM 根元素，虚拟 DOM 尚未渲染为真实 DOM）。data：{ count: 0, isShow: true }（数据保持正常，无变化）。
- 阶段特征：模板已解析，等待将虚拟 DOM 挂载为真实 DOM。
4.mounted（挂载后）
- 执行时机：虚拟 DOM 已渲染为真实 DOM，且挂载到页面中（
$el指向真实根 DOM 元素）。 - 输出结果：
el：<div class="hook-test">...</div>（真实的 DOM 元素，可通过$el操作 DOM）。data：{ count: 0, isShow: true }（数据正常）。
- 阶段特征：DOM 已就绪，可执行 DOM 操作（如获取元素、绑定事件、发起异步请求等），是最常用的钩子之一。
5.beforeUpdate（更新前）
- 执行时机：响应式数据发生变化后，虚拟 DOM 重新渲染之前（仅在
mounted之后，数据更新时触发）。 - 触发方式：点击 “更新数据” 按钮，
count自增，触发该钩子。 - 输出结果：
el：当前的真实 DOM 元素（但 DOM 内容还是更新前的旧数据，如<p>当前计数：0</p>）。data：更新后的新数据（如{ count: 1, isShow: true }）。
- 阶段特征：数据已更新，DOM 尚未同步更新，可在此时获取更新前的 DOM 状态。
6.updated（更新后）
- 执行时机：虚拟 DOM 重新渲染并完成 DOM 打补丁（更新）之后。
- 输出结果：
el：更新后的真实 DOM 元素（DOM 内容已同步新数据，如<p>当前计数：1</p>）。data：更新后的新数据（如{ count: 1, isShow: true }）。
- 阶段特征：DOM 已与新数据同步，可在此处处理更新后的 DOM 逻辑（注意：避免在这修改数据，否则会触发无限更新循环）。
7.beforeUnmount（卸载前）
- 执行时机：组件即将被卸载（销毁）之前（仅在
isShow设为false，组件即将从 DOM 中移除时触发）。 - 触发方式：点击 “销毁组件” 按钮，
isShow变为false，触发该钩子。 - 输出结果：
el：仍为组件的真实 DOM 元素（DOM 还未被移除）。data：{ count: n, isShow: false }（数据仍可访问）。
- 阶段特征：组件实例仍完全可用，可在此处清理资源（如清除定时器、解绑自定义事件、取消异步请求等）。
8.unmounted（卸载后）
- 执行时机：组件已被完全卸载，从 DOM 中移除之后。
- 输出结果：
el：undefined（DOM 元素已被移除，$el不再指向任何元素）。data：仍可访问到数据对象（但组件实例已销毁，数据不再具有响应式能力，也不再触发更新钩子）。
- 阶段特征：组件的所有指令解绑、事件监听器移除、子实例销毁，资源已全部清理。
组件的一生
至此，我们可以概括vue生命周期就是组件从产生到灭亡的过程。在其中要关注到$el和$data。
1.初始化阶段（首次渲染）：beforeCreate → created → beforeMount → mounted
2.数据更新阶段：beforeUpdate → updated（可多次触发，每次数据更新都会执行）
3.组件卸载阶段：beforeUnmount → unmounted（仅触发一次，组件销毁时执行）
