Vue的生命周期

Vue的生命周期分为三个阶段，分别为：

• 初始化，

• 运行中，

• 销毁，

• 一共8个钩子函数
  注意： 生命周期钩子函数不允许写成箭头函数

  初始化：

beforeCreate

1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得，真实dom也没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行一次

created

1. 组件创建结束
2. 数据得到了，真实dom没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行了一次

beforeMount
6. 组件挂载前
7. 任务： 判断el 判断 template
如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
8. 数据可以获得，但是真实dom还没有渲染
9. 可以进行数据请求，也提供了一次数据修改的机会
10. 执行一次

mounted
11. 组件挂载结束
12. 数据获得了，真实dom也获得了
13. 可以进行数据请求，也就可以修改数据
14. 执行了一次
15. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）

综上总结：

    1. 数据请求一般写在created里面
    2. 第三方库实例化我们一般会往mounted中写
    		第三方库的实例化要求，必须真实dom已经存在

运行中

触发条件：数据更新

beforeUpdate
1. 更新前
2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
4. 可以触发多次

updated

1. 更新结束

2. 真实dom得到了，数据也得到了（ 更新后的 ）

3. 动态数据获取（ 第三方库实例化 ）

    总结：
    第三方动态数据请求一般放在updated，然后进行第三方库实例化的优化
    1.理由： 将动态数据的第三方库实例化放在updated中是有弊端的，弊端是第三方库会重复实例化
    2.解决：
    将实例化放到异步队列中去
   
    将实例化放在created的数据请求中，然后放在setTimeout中
    		
    vue提供了一个它认为是最好的方案： **nextTick**
    	
    使用： Vue.nextTick this.$nextTick
    		
    nextTick表示组件渲染结束之后这个方法才会调用
   

销毁中

触发条件：当组件销毁时

beforeDestroy

1. 销毁前

Destroy

1. 销毁完成

这两个钩子功能一致

• 用来做善后的,比如计时器的关闭 第三方实例的删除

• Vue的销毁有两种形式

  • 通过开关的形式 - 外部销毁

    • 外部销毁不仅能销毁组件，也能销毁该组件的dom结构

  • 通过调用 $destroy 方法 - 内部销毁

    • 内部销毁只能销毁组件，不能销毁组件的dom结构

最后在用几张网上找到图概括下

Vue.js官网上的生命周期：