vue生命周期与生命周期钩子

阅读量：

Vue中的生命周期

通俗来说, 生命周期指的是Vue实例或组件从创建到被销毁的过程中经历的一系列阶段。其中每个阶段都称为一个钩子。Vue中的created方法是一个用于管理生命周期 hook函数,当一个vue实例被创建时会调用该函数,随后会执行编译步骤,然后将其插入到DOM文档中。

每个 Vue 组件实例在其创建过程中必须经历一组必要的初始化步骤。例如，在初始化阶段需要配置好对数据变化的监听机制，并进行模板的编译过程；随后会将组件绑定到文档主元素树中，并且在组件状态发生变化时需要动态更新绑定到的 DOM 元素。此过程中组件生命周期中的钩子函数会被触发，并允许开发者在一个指定的时间段内注入和自定义相关的代码逻辑。

生命周期与生命周期钩子

要深刻理解生命周期的各个节点，就必须了解浏览器的渲染过程

生成一个应用实例，并在将模板转换为HTML之前调用该操作；这通常涉及设置相关属性值后呈现为视图页面。

构建DOM树

构建css规则树，根据执行顺序解析js文件。

app实例被挂载到，在页面渲染为HTML模板后调用，在初始化页面完成之后再对生成的HTML文档的DOM节点执行操作。

构建渲染树Render Tree

渲染树布局layout

渲染树绘制

生命周期图示

处于beforeCreate阶段时

created阶段 在浏览器渲染整个HTML文档的过程中,DOM节点、CSS规则树以及JavaScript文件被解析完成,然而在浏览器渲染过程中尚未完成,这些资源尚未挂在页面上,即在Vue生命周期中的created阶段,实例已初始化完成但尚未挂在$el上,因此我们无法获取到相应的DOM节点;然而我们仍然可以通过访问Vue的数据存储区（data）和方法存储区(methods)来获取数据信息

在beforeMount阶段的实际情形与其创建阶段具有相似性

在mounting过程中，在对browser而言已经实现了对dom和css规则树的渲染，并完成了渲染树的布局；当browser接收到该指令时会调用渲染器的paint（）函数来显示内容；而对于vue而言，在mounting过程中其template成功加载到$el中位置后就可实现页面展示；因此，在这个阶段即可操作DOM节点。

Vue框架中的周期性钩子详细信息，请参考：组合式 API：生命周期钩子 | Vue.js (vuejs.org)

生命周期钩子

选项式API	组合式API
beforeCreate	不需要，直接隐式包含在setup函数中。
created	不需要，直接隐式包含在setup函数中。
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted

注册生命周期钩子