聊聊对Vue.2生命周期的理解

163 阅读2分钟

vue 生命周期分为个四个阶段

  1. 初始化阶段: beforeCreate 与 created
  2. 挂载阶段: beforeMount 与 mounted
  3. 更新阶段: beforeUpdate 与 updated
  4. 销毁阶段: beforeDestroy 与 destroyed

平时在开发中一般在 created 函数中发送 ajax 请求获取数据,在 mounted 中获取挂载完毕后的真实 DOM,destroy 中销毁定时器,延时器或绑定的一些事件

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

生命周期整体流程 图解

Snipaste_2023-05-28_10-26-21.png

数据请求在 created 和 mouted 的区别

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

参考文献