事件循环和Vue 中 $nextTick 作用与原理

    一、Vue 中 $nextTick 作用与原理

Vue 在更新 DOM 时是异步执行的，在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。

$nextTick的作用是：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新后DOM的问题了。 $nextTick的原理：$nextTick本质是返回一个Promise 

 应用场景：

1. 在钩子函数created()里面想要获取操作Dom，把操作DOM的方法放在$nextTick中

2. 点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

showsou(){
  this.showit = true //修改 v-show
  document.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
}

修改为：

showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

二、js 事件循环

1. js的执行顺序，先同步后异步
2. 异步中任务队列的执行顺序： 先微任务microtask队列，再宏任务macrotask队列
3. 调用Promise 中的resolve，reject属于微任务队列，setTimeout属于宏任务队列
   注意以上都是 队列，先进先出。

微任务和宏任务
实际上，异步任务也被分为微任务和宏任务，这两种任务在最直观的区别在于优先级
如上文所说，当我们在执行栈中将同步任务执行完了之后，我们会去查看任务队列中的任务，首先查看的是微任务，如果有微任务，将其拿到执行栈中执行，如果没有，则去查看宏任务，做一样的操作
从上面的流程看出，微任务的优先级是大于宏任务的

而从这两个任务的命令角度，可以有另一种也是比较准确的理解，我们可以将任务队列中存在的任务也看出宏任务，而宏与微，实际上就是大和小的区别，微任务的存在，是为了能够在两个花费时间长的宏任务之间，去处理一些微小的任务，所以，实际上我们是在处理完任务队列中的任务后，在执行下一个宏任务之前，查看当前是否有微任务，如果有，就利用这个间隙去执行微任务，等到微任务都执行完了，再去执行下一个宏任务

因此，即使同时有多个宏任务被加入队列中，在这些宏任务之间切换时，也要去看微任务队列中是否有微任务，如果有的话就要先执行这些微任务

微任务包括 process.nextTick ，promise ，MutationObserver。
宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

 

例1

(function() {
 
   setTimeout(() => {
       console.log(0);
   });
 
   new Promise(resolve => {
       console.log(1);
 
       setTimeout(() => {
           resolve();
           Promise.resolve().then(() => console.log(2));
           console.log(3);
       });
 
       Promise.resolve().then(() => console.log(4));
 
   }).then(() => {
       console.log(5);
       Promise.resolve().then(() => console.log(8)); //这句是多加的
       setTimeout(() => console.log(6));
   });
 
   console.log(7);
 
})();
// 1,7,4,0,3,5,2,8,6

例2

 

await相当于promise的内容，await后的语句console.log('async1 end‘） 相当于promise().then内的语句 

 promise状态一旦改变了 就不会在变化，所以 resolve(2) 后， resolve(1) 不会输出