前言
Vue的生命周期和JS异步都是有很多文章的知识点，我之前也是一知半解，基本够用。
但是直到我在开发的时候真的遇到了问题，才发现如果不把这些知识点融汇到一起，很难解决实际问题。
我甚至觉得这是我离尤雨溪最近的一次。
生命周期
生命周期就是LifeCycle，生命周期在Vue中更为直观，它很好的描述了一个Vue项目从诞生到销毁的全部过程。
我还是引用Vue的官方文档：
因为本文只涉及到了Create/Mount两个生命周期，所以我也只对这两个周期进行叙述。
beforeCreate
这是第一个生命周期函数，指的是实例在被完全创建之前，此时为一个空的实例对象，只有一些默认的生命周期函数和默认的事件，并且此时data和methods中的内容还没有被初始化，也就不能被调用。
created
此时data，methods都已经被初始化好，可以被调用。如果你想在渲染时先获取到数据，可以考虑把axios语句放在这里。
这种说法是比较常见的一种，但是考虑到axios的异步，我很怀疑放在created与mounted内是否有较大的性能差距。而如果要获取并且改变dom，似乎就要放在mounted中，总之这里需要更多的证据。
而在这两个周期之间，此时Vue开始编辑模板，执行相关的逻辑，并最终在内存中生成一个编译好的最终模板字符串，并渲染为DOM。但是还没有挂载到真正的页面中去。
beforeMount
此时，页面中的元素还没有被替换，只是之前的模板字符串。例如可以尝试着写一个插值，通过innerText获取这一段，看看是{{something}}还是真正的数据。答案是前者。
接下来，就是要把已经编译好的模板替换至页面。
Mounted
这是实例创建期间的最后一个生命周期函数，当mounted执行完后实例就已经被完全创建完毕，此时内存中的模板字符串已经被真实的挂载到页面中，而用户可以看到完成渲染的页面。
JavaScript异步
因为JavaScript是一个单线程语言，并没有多线程，所以JS也不能同时执行很多个语句，绝大多数情况下都是顺序执行语句，也因此衍生出了非常多的面试题。而如果一条语句不能够正常执行，接下来的语句都不能再正常执行。
所以，JavaScript引入了异步这个概念，但问题是现在会更难搞懂语句的执行顺序。
例如：
console.log("1");setTimeout(()=>{console.log("2");},0);console.log("3");
正确答案是132，而不是123。
因为设置了setTimeout，语句会在延时之后执行，即在条件符合之后才会开始执行，这就是异步执行的特点。
而在同步语句中执行异步语句，则是基于Event Loop。
这里对于操作来说不是特别重要，如果你对这个概念感兴趣可以访问：
什么是 Event Loop？ - 阮一峰的网络日志
那么，我们还可以对这两种语句，引出一个分类，分别是宏任务与微任务。
相同的，如果你对这个概念感兴趣可以访问：
javaScript macro-task（宏任务）与micro-task（微任务）
在这里没什么必要展开，这些概念别人比我解释的更清楚，重要的是，我想引出一个结论：
JavaScript作为单线程语言，并没有多线程的语言的语法特点，但是这也是JavaScript具有其他语言不具有的优势的原因。
对于语句来说，在event loop中，JS会先执行一个宏任务，而如果遇到微任务，会将其放入到微任务的event list里，而不是立即执行。
当宏任务执行完毕后，JS会查看微任务的event list，并且再依此执行微任务。
所以，即使setTimeout在3之前，也不会出现等待后输出2再输出3的情况。
最后
至于为什么我需要把这两个知识点单独拉到一篇文章里分析，主要是因为下面这篇文章：
/p/260523407
感谢：
黑马程序员39期web前端-vue生命周期_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili/qq_36117508/article/details/81609913
