生命周期

mxleader / 2023-08-05 / 原文

初学时候，真抽象啊

vue为什么有这么多周期

创建一个 Vue 组件并将其嵌入到你的应用中时，这个组件会经历不同的阶段，就像生物有不同的成长阶段一样。Vue 的生命周期钩子就是帮助你在这些不同阶段做一些事情的工具，就像在生物的成长过程中你会采取不同的行动一样。

假设你在制作一个饼干，那么可以把这个制作过程类比为 Vue 组件的生命周期：

买材料（创建阶段）：在制作饼干之前，你需要去买面粉、糖、黄油等材料。在 Vue 组件中的 beforeCreate 和 created 钩子中，你可以进行类似的准备工作，比如设置默认的数据值。
制作饼干（挂载阶段）：接下来，你把材料混合在一起，制作出饼干面团。在 Vue 组件中的 mounted 钩子，你可以进行一些操作，比如初始化一个地图、或者设置一些只有在组件在页面上显示时才需要的内容。
烤饼干（更新阶段）：当饼干在烤箱里烤的时候，你可能会检查一下饼干是否变金黄色。在 Vue 组件中的 updated 钩子，你可以在数据变化时做一些操作，就像检查饼干的状态一样。
吃饼干（销毁阶段）：最后，你吃掉了饼干，饼干不再存在了。在 Vue 组件中的 beforeDestroy 钩子，你可以清理一些东西，比如关闭定时器、取消订阅，确保在组件销毁之前清理不再需要的东西。

为什么组件还会被销毁

Vue 组件之所以会被销毁，是为了确保应用程序的内存使用效率和性能。当一个组件不再需要存在时，它应该被销毁以释放资源、内存和其他相关的开销。

Vue 组件在以下情况下会被销毁：

组件不再在父组件中使用：如果一个组件在父组件中被移除或者不再使用（例如通过条件渲染或者动态组件），Vue 会自动将其销毁。
页面切换：在单页应用中，当你从一个页面切换到另一个页面时，旧页面上的组件会被销毁，以释放资源。
v-if 或 v-show 条件变为 false：如果一个组件被包裹在一个 v-if 或 v-show 中，并且这个条件变为 false，那么这个组件会被销毁。
调用 .$destroy() 方法：你可以在组件实例上主动调用 $destroy() 方法来销毁组件。不过，这种方式一般不太常用，因为 Vue 会自动管理组件的生命周期。
Vue Router 导航：当使用 Vue Router 进行导航时，旧页面上的组件会被销毁，同时新页面上的组件会被创建和挂载。
组件的父组件被销毁：如果一个组件的父组件被销毁，那么它本身也会被销毁。

生命周期是什么

创建阶段（create）：
- beforeCreate：在实例刚刚被创建，数据观测和事件配置之前被调用。
- created：在实例创建完成后被立即调用。此时实例已完成数据初始化，但尚未挂载到DOM。
挂载阶段（mount）：
- beforeMount：在挂载开始之前被调用。在这个阶段，模板已经编译完成，但尚未渲染成HTML。
- mounted：在挂载到DOM后被调用。此时组件已经在DOM中显示，可以进行DOM操作。
更新阶段（update）：
- beforeUpdate：在数据更新之前，DOM更新之后被调用。你可以在这里访问并操作更新之前的状态。
- updated：在数据更新且DOM重新渲染之后被调用。你可以在这里执行与DOM有关的操作。
销毁阶段（destroy）：
- beforeDestroy：在实例销毁之前调用。在这里可以进行一些清理工作，比如取消定时器、解绑事件监听等。
- destroyed：在实例销毁之后调用。此时实例已经被完全销毁，所有的事件监听器和子实例也被销毁。

作用是什么

生命周期为你提供了在组件不同阶段执行代码的控制权，让你能够更好地管理组件的状态、行为和性能。通过合理地使用生命周期钩子函数，你可以优化代码结构、实现复杂的逻辑，并确保组件的正确运行和性能表现

DOM渲染

DOM 渲染指的是将网页中的 HTML 标记（元素）转换成浏览器中的 Document Object Model（文档对象模型）。在网页中，HTML 元素（例如 <div>、<p>、<span> 等）描述了页面的结构和内容，而浏览器需要将这些标记解析成一个树状结构，以便可以在浏览器窗口中正确显示网页。

DOM 渲染的过程包括以下步骤：

解析 HTML：浏览器读取HTML文档，并将其解析成一个树状结构，即 DOM 树。DOM 树表示了文档的层次结构，其中每个节点代表一个 HTML 元素或文本内容。
构建 DOM 树：解析器创建了一个包含所有 HTML 元素的树状结构，其中每个元素对应一个节点，节点之间通过父子关系进行连接。
渲染树构建：浏览器将 DOM 树转换为渲染树（Render Tree），渲染树只包含需要在页面中显示的内容，它会过滤掉不可见的元素，比如样式设置为 display: none 的元素。
布局和绘制：浏览器根据渲染树中的每个节点进行布局（layout）和绘制（painting），确定元素在屏幕上的位置和外观。这个过程称为渲染流水线（render pipeline）。
显示页面：布局和绘制完成后，浏览器将渲染后的页面内容显示在屏幕上。

在 Vue 组件中，DOM 渲染指的是将组件的模板（template）转换为实际的 DOM 元素，并将这些元素添加到页面中。Vue 的数据绑定和模板语法使得你可以动态地更新组件的显示内容，当数据发生变化时，Vue 会自动重新渲染相关的 DOM 部分，以反映最新的数据状态。

怎么使用

在DOM渲染之前或之后执行代码：
- 如果你需要在组件的DOM渲染之前执行一些操作，比如初始化第三方库或获取DOM元素的信息，你可以使用 beforeMount 钩子。在这个阶段，组件已经编译完成，但尚未挂载到DOM。
- 如果你需要在组件的DOM渲染之后执行一些操作，比如操作已渲染的DOM元素或添加事件监听器，你可以使用 mounted 钩子。在这个阶段，组件已经挂载到DOM，可以进行DOM操作。
在数据变化时作出响应：
- 如果你希望在数据发生变化时执行一些操作，比如更新一些计算属性或监听数据变化做出相应的UI更改，你可以使用 watch 选项来监听数据的变化。你也可以在 updated 钩子中做这些操作，在数据更新后进行响应。