本文继续探索vue中的坑，关于vue的生命周期和异步加载相关处理的文章还比较少，可能是自己没有用谷歌而用百度的缘故吧。关于异步操作和生命周期，会牵扯到浏览器的单线程处理机制，以及ES中的promise对象，有兴趣的可以事先了解一下再看下去，当然我自己对单线程的处理机制可能了解的也不是很深，写的不对，请指正。
关于本文中生命周期的理解，一切以实际出发，为什么要强调这个，因为实际情况和官方API有些出入，当然我会说明发生这种情况的两种合理的解释。
首先，要明确一件事，我在做vue开发的时候，用的是vue-cli脚手架工具搭建的环境，如果是初学者，请务必！！！不要往下看了，因为下面的内容会让你对vue的生命周期造成误解。
如果你对生命周期的概念还比较模糊，请顺序阅读
vue的生命周期一共有 6+2 个阶段
分别是：（6）
创建前（beforeCreate），没数据，没dom
创建完毕（created），有数据，没dom
挂载dom前（beforemount），说实话，如果你真的是新手的话，挂载两个字可能不是很理解，因为我之前也觉得说这么深奥搞鸡毛，我根本听不懂好吧，当然我现在觉得这不是说的很对吗！那我通俗的解释一下，挂载前，就是vue生成了一堆虚拟的dom，你可以理解为一个json格式的字符串。如下所示，生成的虚拟dom还没有解析双大括号里面的内容，只是单纯的放着。
“father:
爸爸的节点:div
爸爸的class:'balabla'
爸爸的儿子:
儿子的节点:'span'
............” 挂载dom完毕（mounted），根据上面的说法，这一步骤就好理解了，就是说dom中的各种vue特性如双大括号绑定数据之类的都搞定了，而且我把它放到html文档流中去了。
销毁前，
销毁完毕 ，关于销毁的触发，你可以尝试用v-if，这是坠简单的，同时你也能发现v-if和v-show的本质区别了，当然在单页面应用中（vue-router），你也可以用“跳转页面”实现上一页面的组件销毁，了解一下就行。
（2）
更新视图前，
更新视图完毕，这两个周期都在更新数据时触发，是数据驱动模版最重要的一环。
关于这八个生命周期，先聊一下个人的理解，其实我觉得他的设计初衷跟人的生老病死是一样的，前六个对应的分别是
出生前，出生，学校阶段，学以致用阶段，准备后事，入土为安
至于触发更新，就不在这六个阶段之内了
那么，这六个阶段是不是按顺序执行的呢？可以说是，也可以说不是。
先说为什么是，来看我网上抄来的一段代码
<template>
<div class="">
<div>{{ message }}</div>
</div>
</template>
<script>
export default {
data () {
return {
message: 'hello world',
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
}
</script>
<style scoped>
</style>
最终控制台打印：
根据这个打印结果，我（哔哔哔）的研究不下去了！
说好的挂载前，要把虚拟dom放上去的呢？？？此处不应该是 <div class=""><div>{{ message }}</div></div>嘛？？？
ok，基于这个问题的答案其实很简单，vue-router作为单页面应用，最终都会将子页面发给<router/>，所以这里的this指向的是vue.component，也就是其中的一个子页面的组件实例，而不是全局的vue。
好的，现在知道哪儿出了问题。但是，官网并没有给为什么子组件初始化的时候在挂载dom前这个生命周期为什么没有虚拟dom的理由。那只能猜了（当然啃源码只坠吼滴）。
1.个人认为比较扯淡的理由，在vue官方论坛看到的，但讲的还不错，如果你想获取$el，你可以去mounted状态获取，所以不用beforeMount状态就好了，在实际开发过程中，确实很少使用这个生命周期，因此觉得这么解决好像也能敷衍过去。
2.自己结合官方API猜的
官网API中一句话：注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
刚才已经说到，vue-router作为单页面应用，每个页面其实就是一个组件，而且每个页面中的this指向本身，也就是子页面自己，而不是组件的父级，当然你可以通过this.$parent.$parent(这里我没有打错，就是要找父级的父级，没搞明白为什么，有大佬知道的告诉我下)去访问全局的vue。当你访问this.$parent.$parent.$el的时候你可以发现beforeMount的时候子组件并没有被挂载，作为单页面应用，每一个子页面的虚拟dom应该交由他的父级去处理，因此在子组件内部的beforeMount状态中还没有关于$el的描述也是情理之中的。
不管怎么说，尽量不要用beforeMount就好了。
关于另外两个状态，更新数据和更新dom完毕，在vue检测到数据改变时就会触发，但搜集大部分使用者的建议是，用watch、computed等方法去监控或处理数据，尽量不要在这两个状态去变更数据，我同意大部分人的看法，所以这两个状态就不详细介绍了，实际生产过程中也很少用到。
我不敢保证上面那部分说的是对的，但我敢保证你继续往下看会发现更多错
刚才我说道，vue的生命周期可以是顺序执行的，也可以不是，刚才讲的是顺序执行的情况，下面来说一说异步数据加载的原理以及带来的各种负面影响。
先上一段代码，在刚才的基础上+一两句
//data字段有个num
created: function () {
console.group('created 创建完毕状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el) // undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) // 已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化
//新增代码片段
setTimeout(() => { //这里只是为了偷懒用了ES6的箭头函数，如果是普通函数请注意this指针修改，vue中请不要滥用箭头函数，出了问题找都找不到
this.num ++
this.num += 2
}, 0) //注意这里的延时都是0
setTimeout(() => {
this.num -= 5
}, 0)
}控制台打印结果：
请配合官方异步更新原理和打印结果细细体会，建议先把个人理解的通俗版的看完，再看官方的解释
异步更新队列
可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。
首先可以注意到的点就是，程序并不会顺序执行，怎么说呢，我们可以从控制台打印看到，vue在执行代码的时候，并没有去管定时器里发生了什么事情，甚至我已经设置了0延时，他依旧会去顺序执行其他生命周期，看起来就像跳过了这些异步加载，当我们访问接口的时候，这时我们就开启了一个异步加载，发生的事情和上面的差不多。因此可以确定的一个点就是，生命周期中的任何异步操作，都不会按照顺序执行，他会在非异步操作结束后执行，因此书写这部分代码的时候请注意里面的逻辑不要和顺序挂钩，要确保任何异步操作即使最后执行，之前的程序也不会发生异常从而阻塞整个进程。
这样说起来可能有点复杂，这里我举一个vue用起来特特特特别蛋疼的地方你们就明白了.
<span>{{person.name.firstName}}</span>
<span>{{person.name.firstName}}</span>
data: function () {
return {
message: 'hello world',
add: 1,
person: {
}
}
},
created: function () {
console.group('created 创建完毕状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el) // undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) // 已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) // 已被初始化
//假装接口返回了一些信息给你，如一个人，然后你把这些信息赋值给了this实力
setTimeout(() => {
this.person = {
name: {
lastName: 'carry',
firstName: 'dong'
},
sex: '男'
}
}, 0)上面的程序控制台会报错，啥错呢？vue说我解析this.person.name.firstName的时候发现他undefined
你（哔哔哔）是不是瞎，我明明在created的时候把person信息给你了呀，你竟然说你mounted阶段解析数据的时候解析不出来，菜鸡！
发生这个问题的原因就是，访问接口是一个异步操作，当程序顺序执行生命周期的时候，并不会理你这个异步操作，打个比方，生命周期和异步操作就像浏览器的两个工厂，两个工厂以及里面的车间可以一起开工，但是生命周期车间享有，我没完工，你异步操作就必须等我搞完的权利，因此，不管异步操作是否可以在生命周期结束前执行回调，他都只能乖乖的排在后面等待。因此，当解析器解析到this.person.name.firstName的时候他还真是个undefined，所以遇到类似问题，没别的办法，你只能乖乖的把变量的所有字段预先定义好（当然你也可以不理会报错，因为从结果上来看，程序还是会正确执行，但程序员或多或少都有点强迫症，看到那种红色字体就浑身难受）。至于为什么要这样管理，就跟浏览器的单线程处理机制有关了，你可以理解为，这两个工厂有一个共同的管理员（处理器），这个管理员同时只能管理一个工厂，而且这个管理员特别偏心，他都是等javaScript普通操作全部完工了，再去处理异步车间的事情，因为异步车间往往比普通车间消耗的时间要长，这就好像小学时候老师从隔壁办公室进教室抓讲话的人，每次就抓我，哪怕我有时候没讲话，就很气，但是并没有什么办法~
如果把所有的异步操作看作一个工厂的话，那么不同的异步操作就好像工厂里不同的车间，他们可以同时干活，而且同一个车间里的活只汇报一次，哪怕你老是改订单量，但最终这个车间汇报的都是最后的结果，不会因为你改了一百次订单量，我就汇报一百次，那管理员没那么空，同时车间汇报也按照订单完成顺序排队，即便同时完成，也要等管理员处理完其中一个，下一个才能进去，这就是单线程的蛋疼之处，当然单线程也有很多好处，有兴趣的可以自己了解一下。
关于生命周期和异步加载就理解到这儿，有错可以提醒我，毕竟我也是个小白~