Vue生命周期
一、Vue的生命周期及其阶段
Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
生命周期的四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁 
二、Vue生命周期函数（钩子函数）
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】—》让开发者可以在【特定阶段】运行自己的代码。
接下来展开讲讲这些生命周期函数：
-
beforeCreate（创建前）：实例初始化后立即调用，此时数据观测（data）、事件/监听器（ event /watcher ）尚未设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
-
created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但DOM未挂载，所以不能访问到
$el属性。
- 用途：适合数据初始化（如发起异步请求），但不可操作 DOM。
-
beforeMount（挂载前）：模板已编译为虚拟 DOM，但尚未渲染到页面。此时
$el是初始模板（如{{a}}未解析）。无法操作渲染后的 DOM 元素。 -
虚拟DOM本质上是一个JavaScript对象，它是对真实DOM的抽象。虚拟DOM通过在内存中创建一个虚拟的DOM树，记录新旧树的差异（diff），然后将这些差异一次性更新到真实的DOM中。这样可以避免频繁的DOM操作，提高渲染效率。
-
mounted（挂载后）：实例已挂载到真实 DOM，
$el可访问，页面完成首次渲染。 -
用途：适合DOM 操作（如初始化第三方库）、异步请求依赖 DOM 的场景。
-
beforeUpdate（更新前）：响应式数据更新时调用，数据已更新，但 DOM 尚未重新渲染（页面显示旧数据）。
-
updated（更新后） ：虚拟 DOM 重新渲染并更新真实 DOM 后调用。
-
用途：可执行依赖新 DOM 的操作，但需避免在此修改数据（可能导致无限循环）。
-
beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，
this仍能获取到实例，data、methods可访问。 -
用途：执行清理工作（如移除事件监听、取消定时器）。
-
destroyed（销毁后）：实例销毁完成，所有绑定（数据、事件、子组件）已解除。无法再操作实例的属性和方法。
created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
三、keep-alive 的生命周期
keep-alive 是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、actived。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。
- 当组件被换掉时，会被缓存到内存中，触发 deactivated 生命周期
- 当组件被切回来时，再去缓存里找这个组件，触发 activated 钩子函数
四、Vue2 与 Vue3 生命周期的区别
| 阶段 | Vue 2 钩子函数 | Vue 3 钩子函数（选项式） | Vue 3 Composition API 函数 |
|---|---|---|---|
| 创建前 | beforeCreate | beforeCreate（不推荐使用） | 由 setup() 替代逻辑 |
| 创建后 | created | created（不推荐使用） | 由 setup() 替代逻辑 |
| 挂载前 | beforeMount | beforeMount | onBeforeMount |
| 挂载后 | mounted | mounted | onMounted |
| 更新前 | beforeUpdate | beforeUpdate | onBeforeUpdate |
| 更新后 | updated | updated | onUpdated |
| 销毁前 | beforeDestroy | beforeUnmount | onBeforeUnmount |
| 销毁后 | destroyed | unmounted | onUnmounted |
| 调试钩子 | 无 | 新增 renderTracked、renderTriggered | onRenderTracked、onRenderTriggered |
Vue3 的生命周期与 Vue2 的核心区别可概括为：
- 钩子函数名称调整（如销毁阶段
beforeDestroy→beforeUnmount） - 引入 Composition API 的
setup替代beforeCreate/created，并新增调试钩子