Vue生命周期-EW帮帮网

Vue生命周期：一个Vue实例从创建到销毁的整个过程。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 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 是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、actived。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。

阶段	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 的核心区别可概括为：

Vue生命周期