Vue 生命周期的简单总结

知识点总结

Vue 的生命周期是指从创建–>挂载–>更新–>销毁的过程,简单地说,一个组件从开始创建到最后销毁所经历的各种状态,就是一个组件的生命周期。首先,官方文档对于 Vue 生命周期的图解一定要仔细研究一波,请看官方图解 O(∩_∩)O

Vue生命周期图示

从图示可以看到,Vue 的生命周期实际上分为八个步骤,分别是 beforeCreate,created,beforeMount,Mounted,beforeUpdate,updated,beforeDestroy,destroyed。下面对每个阶段进行简单的分析.

  • beforeCreate 阶段,发生在实例初始化之后,数据观测(data observer)和 event/watcher 事件配置之前,此时无法获取 data 中的数据和 methods 中的方法
  • created 阶段,在实例已经创建完成之后被调用,这里数据观测,属性和方法的运算都已经被配置,Vue 实例的数据对象 data 有了,$el 还没有。使用场景:发送请求获取数据
  • beforeMount,在 Vue 实例挂载之前被调用
  • 在 Mounted 阶段,此时 Vue 实例已经挂载到页面中,可以获取到 el 中的 DOM 元素,进行 DOM 操作
  • beforeUpdate 阶段,数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前,这时候可以在这个阶段进一步地更改状态这不会出发附加的重渲染过程
  • updated 阶段,组件 DOM 已经更新,此时可以执行依赖于 DOM 的操作
  • beforeDestory,在 Vue 实例销毁之前被调用,在这一步,实例完全可用。使用场景:实例销毁之前,执行清理任务,比如定时器的消除等
  • destroyed,在 Vue 实例销毁之后调用,调用后,Vue 实例指示的所有东西都会解绑,,所有的事件监听器会被移除,所有的子实例也会被销毁,但 DOM 结构任然存在

今天又是充满希望的一天,继续加油( ̄ ▽  ̄)”

日常吸猫


   转载规则


《Vue 生命周期的简单总结》 Zoe 张兮兮 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录