Vue 生命周期

/*

* @version: V.1.0.0.1

* @Author: fenggang

* @Date: 2019-06-18 19:38:19

* @LastEditors: fenggang

* @LastEditTime: 2019-06-18 20:22:14

* @Descripttion: Vue Life Cycle

*/

---

Vue 生命周期:

1. new Vue() 实例 Vue 对象
2. beforeCreate 在 Vue 对象实力之前(最先加载)，可以先做一个加载动画效果
3. created 已经实例完 Vue 对象，Dom 对象还未生成(结束动画加载，可以渲染 Dom)，可以做的事情给属性赋值以及请求的网络接口加载
4. 开始检测 el [el 为 element ]是否存在,如果不存在则检查最后 Vue 对象之后 .$mount() 是否存在里面参数为 '#app', 如果两者都不存在生命周期在此结束
5. 检测 template 检查组件，组件当中的内容为 html 标签(可以自定义组件内容)，也可以自己定义的标签,如果 第4条内容不存在 template 要是也不存在，没有可渲染的内容则生命周期结束
6. beforeMount 挂载，开始编译 template 模板里内容，只是在虚拟 Dom 中执行
7. mounted 完成编译，开始挂在钩子函数，当前页面显示完成执行函数
8. beforeUpdate 组件发生更新之前
9. updated 组件更新之后
10. beforeDestroy 销毁之前，代码执行已基本到结束
11. destroyed 方法执行完成销毁，代码执行结束

---

生命周期执行顺序总结：

1. beforeCreate 组件实例化之前之执行的函数
2. created 组件实例化完成，但页面还未显示
3. beforeMount 组件挂载前，页面仍未显示，但虚拟 Dom 已经配置
4. mounted 组件挂载之后，此方法执行后，页面显示
5. beforeUpdate 组件更新前，页面仍未更新，但虚拟 Dom 已经配置
6. updated 组件更新，此方法执行后，页面显示
7. beforeDestory 组件销毁前
8. destoryed 组件销毁