项目中遇到的异步

前言

我们在做项目的时候会遇到很多异步操作，但是不知道它们什么时候开始执行、它们执行的顺序以及使用场景，比如$nextTick、document.ready、window.onload，下面我们就一一开始讲解

document.ready和window.onload对比

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成(不包含图片等非文字媒体文件)，而是onload，表示页面包含图片等文件在内的所有元素都加载完成。

区别

• document.ready：在Dom节点创建完成后执行，如果有多个定义则依次执行
• window.onload：在页面所有资源加载完成后执行，如果有多个定义则只执行最后一个
• document.ready在window.onload前执行

Dom文档加载步骤

• 解析HTML结构
• 加载外部的脚本和样式文件
• 解析并执行脚本代码
• 执行document.ready内代码
• 加载图片或者媒体文件等二进制资源
• 页面加载完毕，执行window.onload内代码

$nextTick

Dom更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的Dom，通过setTimeout(fn, 0)也可以同样获取到。

使用场景

在created、mounted阶段如果需要操作渲染后的视图，也要使用nextTick方法。
⚠️注意：官方文档说明：注意mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted。

总结：settimeout、接口、异步都会有不同的线程控制，它们互不影响，所以它们也不会互相堵塞，但是有的线程是互斥的，比如js线程和GUI线程是互斥的