Vue生命周期的理解

Posted 2023-03-04

参考技术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