在一轮事件循环中：
执行宏任务 => 执行微任务 => 执行 UI Rendering ... 下一轮事件循环。。。
微任务（Promise.then）实现： js 操作dom 之后，微任务开始执行，此时 UI还没渲染，但是没有关系，它迟早要渲染的，因为我们已经更新 dom 了，此时获取 dom 的数据也是更新后的数据。
宏任务（setTimeout）实现：创建一个新的 task 并加入事件队列的末尾，操作 dom 的任务和到该宏任务直接可能间隔了多个宏任务。
区别：宏任务执行完毕之后会执行所有微任务， 微任务在与更新数据的操作的同一轮事件循环中执行，而宏任务则是再下一轮事件循环执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
background-color: coral;
height: 100px;
}
</style>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="a" @click="change" :style="{ width: w + 'px' }">
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
w: 100
},
methods: {
change() {
this.w += 100
let method = 1
if (method == 1) {
// 微任务形式
Promise.resolve().then(() => {
alert('页面更新了么')
console.log(document.querySelector('.a').clientWidth)
})
} else if (method == 2) {
// 宏任务形式
setTimeout(() => {
alert('页面更新了么')
console.log(document.querySelector('.a').clientWidth)
})
}
}
}
})
</script>
</body>
</html>
网友评论