vue的生命周期

生命周期是？

用官网话来说：vue实例从创建到销毁的过程，就是这个vue实例的生命周期。 从开始创建、初始化数据、编译模板、挂在dom->渲染、更新->渲染、准备销毁、销毁等一系列过程。

图示

从vue官网借鉴一张vue生命周期图（拿来吧你！）正如官网那句话，现在不需要立马明白所有的东西，因为随着不断的学习和使用，它的参考价值会越来越高。

四大阶段，八大方法

  初始化     beforeCreate       created
  挂载       beforeMount        mounted
  更新       beforeUpdate       updated
  销毁       beforeDestroy      destroyed

1 初始化阶段

1. new Vue()： Vue实例化对象(组件也是一个的vue实例化对象)
2. Init Events & Lifecycle：初始化事件和生命周期函数
3. beforeCreate：生命周期函数被执行此时不能访问data和menthods等中的东西
4. Init injections&reactivity：vue内部添加data和methods等
5. created：生命周期钩子函数被执行，实例创建此时能访问data和menthods等中的东西
6. 接下来开始编译模板：开始分析
7. Has el option? ：是否有el选项 – 检查要挂到哪里
8. 没有. 调用$mount()方法
9. 有, 继续检查template选项

2 挂载阶段

1. template选项检查:
2. 有：编译template返回render渲染函数
3. 无：编译el选项对应标签作为template(要渲染的模板）vue工程项目不支持
4. 虚拟DOM挂载成真实DOM之前:
5. beforeMount ：生命周期钩子函数被执行
6. Create： 把虚拟DOM和渲染的数据一并挂到真实DOM上
7. 挂载完毕，mounted：生命周期钩子函数被执行

3 更新阶段

1. 当data里数据改变, 更新DOM之前，beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom
2. Virtual DOM：虚拟DOM重新渲染, 打补丁到真实DOM
3. updated – 生命周期钩子函数被执行
4. 当有data数据改变 – 重复这个循环

4 销毁阶段

1. 当$destroy()被调用：比如组件DOM被移除(例v-if)
2. beforeDestroy：生命周期钩子函数被执行
3. 拆卸数据监视器、子组件和事件侦听器
4. 实例销毁后, 最后触发一个钩子函数
5. destroyed： 生命周期钩子函数被执行