<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue 同步 $n ...
<!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>
