前言
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
正确答案是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