针对于Vue的生命周期进行详细的说明，方面加深对各个方法的引用。
引言：
前几天重新回顾vue官网时，看到vue的生命周期，想着自己用vue开发了快一年了，就总结总结vue知识，再次加深自己对vue的理解。
正文：
首先上初始化代码（代码不完整，完整代码在下面的github里），然后在控制台打印并查看结果（console.group()表示该范围内是一个组，方便查看一组）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue生命周期</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> </div> </body> <script> var vm = new Vue({ el: '#app', data: { message: 'Vue' }, beforeCreate: function() { console.group('------beforeCreate创建前状态------'); console.log(this.$el); console.log(this.$data); console.log(this.message) }, created: function() { console.group('------created创建完毕状态------'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, mounted: function() { console.group('------mounted 挂载结束状态------'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message) } }) </script> </html>
结果显示如下：
ps：因为没有更新数据和销毁数据，所以beforeUpdate，updated，beforeDestroy和destroyed等钩子函数没有触发，只打印出beforeCreate，created，beforeMount和mounted的钩子函数情况。
在vue生命周期图例中可知，可以分为以下几个步骤：
一 beforeCreate—created间的生命周期
这一步从图中可知：是初始化data和事件，注册和反映（这个翻译感觉不太对劲，说白了就是初始化）。
打印结果如下：
通过代码结果可知：$el，$data以及message都为undefined，说明是处于初始化状态。
二 created—beforeMount间的生命周期
这一步，会进行两次判断：
* 判断对象是否有el选项。
如果有的话就继续向下编译，
如果没有el选项，则停止编译。也就意味着停止了生命周期，直到在该vue实例上再次调用vm.$mount(el)才会继续往下编译。
代码结果演示如下：
1 当$el不挂载到vue时（注释掉new Vue()里的el）
结果如下：
通过以下代码可知：当$el不挂载到vue时，只会进行beforeCreated和created这两个钩子函数，不会进行beforeMounted和mounted钩子函数。
2 当重新调用时（输入vm.$mount(el)）；
通过打印结果可知：在输入vm.$mount('#app')时，发现这四个钩子函数都实行了。可以推断，mount这一环节是保证$el已经挂载，且可以进行任何数据操作。
** 判断el是否有template模板：
如果有的话直接通过渲染函数渲染出来。
如果没有的话，就直接调用$el的外部html进行渲染。
ps：所谓的template的就是vm对象里的template属性的值，如果template没有值，则会调用外部的html。
以下demo实现，结论和打印结果：
1 当有template时：
var vm = new Vue({ el: '#app', template:'<h1 style="color:red">{{message}}</h1>', data: { message: 'Vue' } })
2 当无template时：
<body> <div id="app"> <h1>{{message}}</h1> </div> </body>
3 当两者存在时，会优先选择template渲染函数。
<body> <div id="app"> <h1>{{message}}</h1> </div> </body> <script> var vm = new Vue({ el: '#app', template:'<h1 style="color:red">{{message}}</h1>', data: { message: 'Vue' } }) </script>
4 两者不存在时，则不渲染也不报错。
ps：另外，Vue对象中也有render函数，和template一样，render可以返回一个createElement参数，进行渲染。
<body> <div id="app"> <h1>{{message}}</h1> </div> </body> <script> var vm = new Vue({ el: '#app', template:'<h1 style="color:red">{{message}}</h1>', render: function (createElement, context) { return createElement('h1',`${this.message}1111`) }, data: { message: 'Vue' }, }) </script>
通过演示可知：发现render比template优先级高一些。
所以三个渲染的优先级是：render函数选项 > template参数 > 外部HTML
三 beforeMount—mounted钩子函数的生命周期
这一步的生命周期在于虚拟dom树的渲染。
通过打印结果可知：
在beforeMounted钩子函数中，挂载了$el，但只拿到{{message}}，没有完成渲染，
而mounted钩子函数是已经完成了整个流程。
所以Vue生命周期图例的意思应该是：给vue实例挂载$el，并且挂载到虚拟dom元素上。（一开始没明白这一步，现在才恍然大悟）。
四 beforeUpdate—updated间的生命周期
这一步是当vue的data数据发生改变，就会触发对应组件的重新渲染。然后依次触发beforeUpdate和update钩子函数。
ps：看到有位博主说到一个重点！这俩个钩子函数只能在已渲染到模板里的数据发生改变后才能触发，否则不触发。例子如下：
<body> <div id="app"> <!-- <h1>{{message}}</h1> --> </div> </body> <script> var vm = new Vue({ el: '#app', // template:'<h1 style="color:red">{{message}}</h1>', data: { message: 'Vue' }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, }) vm.message = 'aaaa'; </script>
结果可知：没有触发钩子函数。
当把template的注释去掉，结果如下：触发了更新前后的钩子函数。
五 beforeDestroy—destroyed间的生命周期
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
实例如下：<script>
var vm = new Vue({ el: '#app', template:'<h1 style="color:red">{{message}}</h1>', data: { message: 'Vue' }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log(this.$el); console.log(this.$data); console.log(this.message) } }) vm.$destroy(); vm.message='11111' </script>
ps：因为只有$destroy()方法，所以没法判断beforeDestroy和destroyed的区别
结果如下：发现销毁之后，再重新给message赋值，没效果。可见destroyed钩子函数在$destroy()方法实行后会销毁和当前实例有关的东西，不会再次对该实例进行操作。
结尾：
以上都是自己对vue的生命周期的理解，从一开始懵懂，到依次开发vue项目，回头再看这生命周期，就有一种“原来如此”的感觉，感到vue强大之处。
我是17号小白，我把完整代码放到gitHub里了，有需要实践的请前往clone。地址：https://github.com/sqh17/notes/blob/master/ways/vueLifecycle.html。
以上若有不对的地方，请大家能及时私信我或者下方评论，我们一起加油进步。
参考文献：