vue 同步 $nextTick setTimeout 执行的顺序 

<!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>

 

posted @ 2020-03-25 18:20  曾经的水哥  阅读(5152)  评论(1)    收藏  举报