Vue - 组件的生命周期

---

• 生命周期(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结构已被完全移除!