vue 同步 $nextTick setTimeout 执行的顺序
vue 同步 $n ......</div>
<div class="content">
<div class="cnblogs_code">
<pre class="brush: javascript;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 同步 $nexttick settimeout 执行的顺序</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button @click="clickme" id="btn">{{msg}}</button>
<div>
事件循坏vent loop中，每一次循环称为tick，每一次tick的任务如下：
执行栈选择最先进入队列的宏任务（一般都是script）,执行其同步代码直至结束；
检查是否存在微任务，有则会执行至微任务队列为空；
如有必要会渲染页面；
开始下一轮tick，执行宏任务中的异步代码（settimeout的回调等）。
<br>
宏任务与微任务
宏任务（macrotask）
宿主（node、浏览器）发起的任务；
在es6规范中，将其称为task；
script、settimeout、setinterval、i/o、ui rendering、postmessage、messagechannel、setimmediate
微任务（microtask）
js引擎发起的任务；
在es6规范中，将其称为jobs；
promise、mutaionobserver、process.nexttick
</div>
</div>
<script>
var app = new vue({
el: '#app',
data: {
msg: '点击按钮判断控制台打印的内容'
},
methods: {
clickme() {
this.msg = '执行顺序 同步 => promise => settimeout'
console.log('start')
settimeout(() => {
console.log('timeout')
}, 0)
this.$nexttick(() => {
console.log('nexttick')
this.$nexttick(() => {console.log('nexttick2')})
settimeout(() => {
console.log('timeout2')
}, 0)
})
console.log('end')
}
// 先执行同步在执行异步 => 执行$nexttick返回promise,执行timeout (promise比timeout快)
// 事件循环机制： 同步 => 微任务 => 渲染页面 => 开始下一轮，执行宏任务中的异步代码（settimeout的回调等）
// 为什么promise比timeout快 https://blog.csdn.net/weixin_34365635/article/details/91421326
// 1. start
// 2. end
// 3. nexttick
// 4. nexttick2
// 5.nexttick2
// 6.timeout
// 7.timeout2
}
})
</script>
</body>
</html></pre>
</div>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1683296.html">
JTree禁止双击Expand和Collapse的正常解决方法 </a>
</p>
<p>
下一篇： <a href="/article/1683298.html">
Duilib总结与心得 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2228584.html" target="_blank" title="vue方法执行顺序（vue常用的八个生命周期）">
<h2>
vue方法执行顺序（vue常用的八个生命周期） </h2>
</a>
</li>
<li>
<a href="/article/2161539.html" target="_blank" title="vue方法执行顺序（vue常用的八个生命周期）">
<h2>
vue方法执行顺序（vue常用的八个生命周期） </h2>
</a>
</li>
<li>
<a href="/article/2112625.html" target="_blank" title="vue同步父子组件和异步父子组件的生命周期顺序问题">
<h2>
vue同步父子组件和异步父子组件的生命周期顺序问题 </h2>
</a>
</li>
<li>
<a href="/article/2061022.html" target="_blank" title="浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解">
<h2>
浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解 </h2>
</a>
</li>
<li>
<a href="/article/2040030.html" target="_blank" title="实例详解JavaScript中setTimeout函数的执行顺序">
<h2>
实例详解JavaScript中setTimeout函数的执行顺序 </h2>
</a>
</li>
<li>
<a href="/article/1981369.html" target="_blank" title="详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序">
<h2>
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序 </h2>
</a>
</li>
<li>
<a href="/article/1950922.html" target="_blank" title="解决循环中setTimeout执行顺序的问题">
<h2>
解决循环中setTimeout执行顺序的问题 </h2>
</a>
</li>
<li>
<a href="/article/1683297.html" target="_blank" title="vue 同步 $nextTick setTimeout 执行的顺序">
<h2>
vue 同步 $nextTick setTimeout 执行的顺序 </h2>
</a>
</li>
<li>
<a href="/article/1603247.html" target="_blank" title="Vue父子组件生命周期执行顺序及钩子函数的个人理解">
<h2>
Vue父子组件生命周期执行顺序及钩子函数的个人理解 </h2>
</a>
</li>
<li>
<a href="/article/1514276.html" target="_blank" title="setTimeout、Promise、Async/Await 的执行顺序">
<h2>
setTimeout、Promise、Async/Await 的执行顺序 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>