Vue的生命周期详解

组件的生命周期

生命周期（life Cycle）是指一个组件从创建→运行→销毁的整个阶段，强调的是一个时间段。

我想？
组件创建完成做一件事情？
组件刚开始创建时做一件事情？
生命周期帮助我们卡时间

生命周期函数是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

组件生命周期函数的分类

创建一个组件时，将会从左到右依次执行
beforeCreate：创建之前
created：创建之后
beforeMount：渲染之前
Mounted：渲染之后
beforeUpdate：更新之前
updated：更新之后
deforeDestroy：销毁之前
Destroyed：销毁之后

生命周期图示

https://cn.vuejs.org/v2/guide/instance.html#

new Vue() : new一个vue的构造函数。
Init Event&Lifecycle(初始化事件和生命周期函数): 组件的props(属性)/data(数据源)/methods(方法)尚未被创建，都处于不可用状态。
beforeCreate(): 组件创建之前

---

Init injections&reactivity(初始化和): 初始化组件的props(属性)/data(数据源)/methods(方法)
created: 组件的props/data/methods已经创建好，都处于可用状态，但是组件的模板结构尚未生成。仅数据可用，不能操作DOM。常用于发起Ajax请求来拿数据，

---

Has ‘el’ option？： 是否有el指向。
when vm.$mount(el) is called： 当vm.$mount(el)被调用
Has ‘template’ option？： 是否有template指向。
Compile el’s outerHTML as template： 编译el当作模板进行编译
Compile template into render function： 编译template

这部分阶段就是基于数据和模板在内存中编译生成HTML结构

---

beforeMount: 将要把内存中编译好的HTML结构渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构
Create vm.$el and replace ‘el’ with it: 用内存中编译生成的HTML结构，替换掉el属性指定的DOM元素
mounted: 已经把内存中的HTML结构，成功的渲染到了浏览器之中，此时浏览器已经包含当前组件的DOM结构。

---

beforeUpdate: 将要根据变化后、最新的数据，重新渲染组件的模板结构。
Virtual DOM re-render and patch: 根据最新的数据，重新渲染组件的DOM结构。
updated: 已经根据最新的数据，完成了组件DOM结构的重新渲染

---

beforeDestroy: 将要销毁此组件，此时尚未销毁，组件还处在正常工作的状态
Teardown wathers,child components and event listeners: 销毁当前组件的数据侦听器，子组件，事件监听。
destroyed: 组件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除