Vue2的生命周期

事件循环和渲染

概述

Vue2的生命周期主要是指Vue实例从创建、挂载、更新到销毁的整个过程。并为每个过程提供了对应的生命周期钩子函数，允许在不同阶段执行自定义任务，从而更好地控制组件的行为和资源管理。

解析顺序

浏览器先于Vue解析html文件，所以在Vue实例创建前就已经解析好了真实dom树，但插值表达式等Vue特有语法作为普通文本显示。直到挂载完成后，原始dom元素才会被虚拟dom元素替换

四大生命周期

创建阶段（实例初始化）

beforeCreate

• 实例还未初始化，数据观测（响应式数据）和方法及事件监听还未初始化，此时访问为undefined

created

• 实例初始化完成，可以访问数据和方法，但还未解析模板，无AST和虚拟DOM树，常用于提前准备耗时操作的数据。

挂载阶段（虚拟dom与真实dom关联）

beforeMount

• 模板解析完成（包含事件监听），render函数首次调用，虚拟dom树创建，但还未关联到真实dom中，无法操作真实dom

mounted

• 实例成功挂载到真实dom中，原始dom元素被虚拟dom元素替换。可用于初始化依赖真实DOM的库。
• @click=""被转化为v-on:click=""，进一步被编译为js原生事件监听，所以挂载完成后，button中的@click“消失”了。

更新阶段（新的虚拟dom修改真实dom前）

beforeUpdate

• 新的虚拟dom树已生成（渲染任务完成），但还未进行diff比对和patch修补，真实dom未更新。

updated

• 虚拟dom的diff和patch完成，变更应用到真实dom中

销毁阶段

beforeDestory

destoryed

• 销毁本质上是在清理和释放资源，以及避免内存泄漏
• 切断响应式连接：解除真实dom挂载，取消对响应式数据的追踪（watcher和effect）
• 移除事件监听器：移除该实例添加的所有自定义事件监听器(@click等模板声明事件，$on、$emit等自定义事件)
• 销毁所有子组件：递归销毁所有子组件，确保对应的组件树被清理