Vue生命周期

1.new Vue()：创建Vue实例。

2.Init Events & Lifecycle：初始化事件和生命周期函数。

3.beforeCreat：触发钩子函数beforeCreate（这个钩子函数的意思是创建之前触发），Vue实例里面组件的一些属性、数据、方法props、data、methods都还没有被创建，现在还不能使用。

4.Init injections & reactivity：初始化Vue实例里面的属性、数据、和方法/函数（说明可以使用了）。

5.created：触发钩子函数created（已创建），Vue实例里面的属性、数据、和方法/函数创建成功，变成可用状态，但是还没有生成模板结构（意思就是：Vue实例里面的数据已经渲染完成了，但是数据还没有挂载在网页上面）。

6.Has "el" option?：判断有没有el这个选项/属性（就是在Vue实例里面有没有这个el（挂载点）这个选项）。

6.1.Yes：如果有的话，则继续往下判断，Has "template" option?：有没有template（模板）这个选项；

6.1.No：如果没有el这个选项/属性，when vm.$mount(el) is called：查看另一种挂载方式：$.monut，再继续往下判断，Has "template" option?：有没有template（模板）这个选项。

7.无论是Yes，还是No，都会进入 Has "template" option?：有template（模板）这个选项

7.1.如果是Yes，有template（模板）这个选项，compile template into render function*：将模板编译为渲染函数*（编译template里面的HTML代码）。

7.2.如果是No，没有template（模板）这个选项，compile el's outerHTML as template*：将el的outerHTML编译为模板*（编译vue实例挂载点里面的html代码）。

无论是Yes还是No，都会生成HTML代码

8.beforeMount：触发钩子函数beforeMount，把内存中编译好的HTML结构渲染到浏览器中，但是浏览器中还没有当前组件的DOM结构（HTML结构已经渲染到浏览器中，还没有挂载好）

9.create vm.$el and replace el with it：创建虚拟机。替换导视牌el属性指定放入DOM元素（编译生成的HTML结构）。

10.mounted：触发mounted钩子函数，已经把内存中的HTML结构，成功的渲染到了浏览器上，此时浏览器已经包含了当前组件的DOM结构（Vue实例里面的数据已经渲染到浏览器上了，可以在页面上进行展示）。

下面的红色背景色Mounted：监听数据有没有发生改变

when data changes：当有data数据改变 – 重复这个循环

11.beforeUpdate：将要根据变化过后、最新的数据，重新渲染组件的模板结构（修改后，获取到了最新的数据，Vue实例里面的数据发生了改变，但还没有渲染到页面）。

12.Virtual DOM re-render and patch：虚拟DOM重新渲染和补丁

13.updated：已经根据最新的数据，完成了组件的DOM结构的重新渲染（更新后的数据会重新渲染到页面）。

红色背景色Mounted下面的

when vm.$destroy() is called：当$destroy()被调用，说明组件DOM正在被移除(例v-if)。

14.beforeDestroy：触发钩子函数beforeDestory（销毁前，可以释放资源，解绑自定义事件等操作）：将要销毁此组件，但是还没有销毁，组件还处于正常状态。

15.Teardown watchers,child components and event listeners：进行 拆卸监视器、子组件和事件监听器。

Destroyed：实例销毁后, 最后触发一个钩子函数

16.destroyed：触发钩子函数destroyed（销毁后）：组件已经被销毁，组件在浏览器中对应的DOM结构已经被完全移除（Vue实例已经被销毁）。

总结：

• 页面刷新完成，会执行4个钩子函数beforeCreate、Create、beforeMount、mounted；
• 修改的时候会触发两个钩子函数beforeUpdate（修改前）和updata（修改后）；
• 生命周期一共有8个方法；

完。