Vue的生命周期

一. 初始化阶段

1. new Vue() – Vue实例化(组件也是一个小的Vue实例)
2. Init Events & Lifecycle – 初始化事件和生命周期函数
3. beforeCreate – 生命周期钩子函数被执行
4. Init injections&reactivity – Vue内部添加data和methods等
5. created – 生命周期钩子函数被执行, 实例创建----在此函数能够获取到数据，但获取不到真实DOM元素，可以在此进行网络请求或者注册全局事件
6. 接下来是编译模板阶段 –开始分析
7. Has el option? – 是否有el选项 – 检查要挂到哪里
没有就调用 $mount() 方法，有就继续检查 template 选项
 

二、挂载阶段

1. 进行检查是否有 template 选项，有就编译 template 返回 render 渲染函数，没有则编译 el选项对应标签作为 template (要渲染的模板)。
2. 虚拟DOM挂载成真实DOM之前 beforeMount --- 钩子函数被执行，预处理 data 数据，updated 不会被触发
3. Create ---把虚拟DOM和要渲染的数据一并挂载
4. 真实DOM挂载完成
5. mounted --- 钩子函数被执行，可以在此函数中获取挂载后真实DOM的数据

 三、更新阶段

1. 当 data 里的数据被改变后，更新DOM之前执行
2. beforeUpdate -钩子函数被执行，在此只能拿到最初的DOM元素
3.  虚拟DOM重新渲染，打补丁到真实DOM
4. updated---钩子函数被执行
5. 当有 data 数据又有改变-重复这个循环

四、销毁阶段 

1.  当 $destiry() 被调用 - 比如用 v-if 时组件DOM被移除
2. beforeDestroy - 钩子函数被执行
3. 销毁 watch 等数据监视器、子组件和事件侦听器
4. 实例被销毁后，触发最后一个钩子函数 - destroyed