js中立即执行函数会预编译吗_浅析Vue的生命周期以及JS异步

前言

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？ - 阮一峰的网络日志www.ruanyifeng.com

那么，我们还可以对这两种语句，引出一个分类，分别是宏任务与微任务。

相同的，如果你对这个概念感兴趣可以访问：

javaScript macro-task（宏任务）与micro-task（微任务）www.jianshu.com

在这里没什么必要展开，这些概念别人比我解释的更清楚，重要的是，我想引出一个结论：

JavaScript作为单线程语言，并没有多线程的语言的语法特点，但是这也是JavaScript具有其他语言不具有的优势的原因。

对于语句来说，在event loop中，JS会先执行一个宏任务，而如果遇到微任务，会将其放入到微任务的event list里，而不是立即执行。

当宏任务执行完毕后，JS会查看微任务的event list，并且再依此执行微任务。

所以，即使setTimeout在3之前，也不会出现等待后输出2再输出3的情况。

最后

至于为什么我需要把这两个知识点单独拉到一篇文章里分析，主要是因为下面这篇文章：

https://zhuanlan.zhihu.com/p/260523407zhuanlan.zhihu.com

感谢：

黑马程序员39期web前端-vue生命周期_哔哩哔哩 (゜-゜)つロ干杯~-bilibiliwww.bilibili.com

https://blog.csdn.net/qq_36117508/article/details/81609913blog.csdn.net