8

Vue - 组件的生命周期

 4 years ago
source link: https://segmentfault.com/a/1190000040551546
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
  • 生命周期(Life Cycle) 是指一个组件从 创建 => 运行 => 销毁 的整个阶段; 强调的是一个时间段.
  • 生命周期函数: 是由Vue框架提供的内置函数,会伴随这组件的生命周期动态按次序执行
  • 注意: 生命周期强调的是时间段,生命周期函数强时间点.

生命周期图解

创建阶段

  1. beforeCreate (组件的props|data|methods 尚未被创建,都处于不可用的状态
  2. created (组件的props| data | methods | 已经创建好,都处于可用状态, 但组件的模板结构尚未生成 => 发送Ajax最早的时机,请求数据
  3. beforeMount 将要把内存中编译好的HTML结构渲染到浏览器中. 此时对浏览器中还没有当前组件的 DOM 结构
  4. mounted组件第一次被渲染到浏览器中 | 操作 DOM 最早的时机 (此时已经把内存中的HTML 结构成功的渲染到浏览器中)

运行阶段

  1. beforeUpdate (将要根据变化后,最新的数据,重新渲染组件的模板结构)
  2. updated 已经根最新的数据,完成了组件 DOM 结构的重新渲染 =>能够操作到最新的DOM 元素

销毁阶段

  1. beforeDestroy 将要销毁此组件,此时尚未销毁,组件还处于正常工作的状态
  2. destroyed 组件已经被销毁,此组件在浏览器中对应的DOM结构已被完全移除!

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK