Vue生命周期是面试中经常被问到的问题，在实际项目中很多坑都是关于生命周期的，所以理解Vue实例的生命周期很有必要。笔者参考了一些文章，对Vue实例的生命周期做了总结，既是总结笔记以便以后参考，也是供大家一起学习交流。
以下这张图是Vue官网上的，我会利用钩子函数一步一步讲解Vue实例生命周期中发生了什么。
beforeCreate
编写以下代码：
<--index.html-->
<div id="app">
{{msg}}
</div>
var app = new Vue({
el:'#app',
data: {
msg: 'hello world!'
},
beforeCreate(){
console.log('beforeCreate:');
console.log('el:', this.$el);
console.log('msg:', this.msg);
}
})
运行代码，在后台得到以下输出：
由此可以得到，钩子函数beforeCreate()运行时，Vue实例还在初始化过程中，但是el选项和data数据并没有被初始化。所以此时无法获得data数据，如果偏要在此时获取data的之呢？可参考这个回答。
created
同样的html代码，更换钩子函数：
var app = new Vue({
el:'#app',
data: {
msg: 'hello world!'
},
created(){
console.log('created:');
console.log('el:', this.$el);
console.log('msg:', this.msg);
}
})
所以，当created()函数运行时el选项并没有被初始化，data数据被初始化了，可以通过created()获得data对象里的值。
beforeMount
html代码不变，更换钩子函数：
var app = new Vue({
el:'#app',
data: {
msg: 'hello world!'
},
beforeMount(){
console.log('beforeMount:');
console.log('el:', this.$el);
console.log('msg:', this.msg);
}
})
所以，beforeMount钩子函数被调用时，el和data都被初始化了，但是此时el还是虚拟Dom节点。
mounted
更改代码：
var app = new Vue({
el:'#app',
data: {
msg: 'hello world!'
},
mounted(){
console.log('mounted:');
console.log('el:', this.$el);
console.log('msg:', this.msg);
}
})
所以，mounted钩子函数运行时，值已经被渲染在了页面上。
beforeUpdate和Updated
修改代码：
var app = new Vue({
el:'#app',
data: {
msg: 'hello world!'
},
beforeUpdate(){
console.log('beforeUpdate:');
console.log('el:', this.$el);
console.log('msg:', this.msg);
},
updated(){
console.log('updated:');
console.log('el:', this.$el);
console.log('msg:', this.msg);
}
})
发现两个钩子函数没有任何区别，其实beforeUpdate函数被调用时，data里msg的值已经改变了，但是没有渲染到页面上，所以那时的页面显示的还是旧值，页面渲染完毕之后才会调用Updated，这就是两个钩子函数调用时的区别。
beforeDestroy和destroyed
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
参考文章：
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
https://segmentfault.com/a/1190000008010666?utm_source=tag-newest
https://segmentfault.com/a/1190000011381906?utm_source=tag-newest
