欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 同步 $nextTick setTimeout 执行的顺序

程序员文章站 2022-04-23 21:05:33
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/714321.html"> 这个厕所门好像很有故事 </a> </p> <p> 下一篇: <a href="/article/714323.html"> 姿势-1 </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>