简单理解vue的生命周期

Posted 2023-05-17

参考技术A vue的生命周期就是vue实例创建的初始化到实例销毁的过程。期间会有8个钩子函数的调用。

1.beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，可以在这里面使用loading

2.created函数中可以对data对象里面的数据进行使用和更改，不会触发其他的钩子函数，一般可以在这里做初始数据的获取，也可以结束loading

3.beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4.mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...

5.当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

6.当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7.当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8.组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

Vue生命周期的理解

参考技术A

生命周期 （Life Cycle） 的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓” （Cradle-to-Grave） 的整个过程在 Vue 中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在 Vue 生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos() )

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

Vue 生命周期流程图

beforeCreate -> created

created

created -> beforeMount

beforeMount

beforeMount -> mounted

mounted

beforeUpdate

updated

beforeDestroy

destroyed

使用场景分析

created 是在组件实例一旦创建完成的时候立刻调用，这时候页面 dom 节点并未生成 mounted 是在页面 dom 节点渲染完毕之后就立刻执行的触发时机上 created 是比 mounted 要更早的两者相同点：都能拿到实例对象的属性和方法讨论这个问题本质就是触发的时机，放在 mounted 请求有可能导致页面闪动（页面 dom 结构已经生成），但如果在页面加载前完成则不会出现此情况建议：放在 create 生命周期当中

参考文献：https://juejin.cn/post/6844903811094413320