vue---由nextTick原理引出的js执行机制

Posted 2021-02-12 努力┗(｀O′)┛奋斗！

最开始查看nextTick这个方法的时候，眼瞎看成了nextClick。。。我还在疑问难道是下一次click之后处理事件。。。

然后用这个方法的时候，就只知道是用在DOM更新之后调用回调方法。

这时就产生了一堆疑问：

1）DOM更新后？难道修改数据之后，DOM没有及时更新，还有延迟？但是页面上看到的就是实时更新呀，难道还有什么猫腻？

2）它是怎么监听到DOM被更新了

3）它和异步的setTimeout、setInterval有没有关系？

深入了解后才发现里面有大学问。。。

在理解nextTick之前，先来一段代码

setTimeout(function(){
    console.log(11)
},300)

这段代码很简单，一般人都会说，300ms之后控制台打印出11。

但是，一定是精确的300ms之后马上打印出11吗。答案是不一定。为什么？这就涉及到下面的知识点

1. js为什么是单线程

深究原因我不是很清楚，但是我是这样理解的：假如js是多线程，意思是如果我对同一个DOM进行操作，那么都会同时处理。那这时一个线程我对一个按钮修改颜色为red，同时另外一个线程对这个按钮修改颜色为blue。那浏览器到底是执行哪一个呢，这样就矛盾了。所以这就能很好理解为什么要设计成单线程了。

2. Event loop

既然是单线程，那么事件任务就一定会在主线程上排队执行。同一时间就只能按队列执行一个方法。要是某个方法要花费很长时间，那后面的方法就只能等待了，这是极其不能忍受的。所以js设计者把任务分成了同步任务和异步任务。同步任务即主线程（执行栈）上运行的任务，而异步任务则是挂载到一个任务队列里面。等待主线程的所有任务执行完成后（栈空），通知任务队列可以把可执行的任务放到主线程里面执行。异步任务放到主线程中执行完后，栈又空了，又通知任务队列把异步任务放到主线程中执行。这个过程一直持续，直到异步任务执行完成，这个持续重复的过程就叫Event loop。而一次循环就是一次tick。

注意：

1） 这里异步任务例如setTimeout这种，实际上是先由浏览器其它模块（应该是IO设备）处理之后，它的回调函数才再加入到任务队列里面。注意是回调函数。

2） onclick，onmouseover等都属于异步任务。回调都会挂载到任务队列。 

3. microtast（微任务）和macrotask（宏任务）

任务队列里面异步任务也分macrotast（标准说法是task）和microtast（标准说法中它是不属于task的，应该叫 job）。

典型的microtast包含：Promises(浏览器原生Promise)、MutationObserver、Object.observe(已废弃)、以及nodejs中的process.nextTick，UI rendering（UI渲染）

典型的macrotast包含：script整体代码（这个很重要）、setTimeout（最短4ms） 、 setInterval（最短10ms）、MessageChannel、以及只有 IE 支持的 setImmediate。

执行优先级上，先执行宏任务macrotask，再执行微任务mincrotask 

process.nextTick > Promise.then > MutationObserver > setImmediate > setTimeout。

注意:

1） 对于microtast和macrotask，这两个在一次event loop中，microtask在这一次循环中是一直取一直取，直到清空microtask队列，而macrotask则是一次循环取一次。

2） 相当于事件循环的过程是：主线程（栈空）--->取一个macrotask执行---->查看有没有microtask，如果有就执行该任务直到清空microtask队列，然后执行下一个macrotask任务--->又取macrotask执行--->清空microtask里面的任务 。重复第二和第三的步骤直到macrotask任务队列也执行完毕

3） 如果执行事件循环的过程中又加入了异步任务，如果是macrotask，则放到macrotask末尾，等待下一轮循环再执行。如果是microtask，则放到本次event loop中的microtask任务末尾继续执行。直到microtask队列清空。

4） 为什么宏任务先执行，反而处理时间还比微任务慢呢？因为script整体也是macrotask，就先把script里面的代码放到主线程执行，如果再遇到macrotask，就把它放到macrotask任务队列末尾，由于一次event loop只能取一个macrotask放到主线程执行，所以遇到的宏任务就需要等待其它轮次的事件循环了；如果遇到microtask，则放到本次循环的microtask队列中去，等待主线程执行完再执行microtast队列并清空。然后继续执行下一个tick的宏任务。

 

到这里，上面那个300ms的定时器为什么不一定是精确的300ms之后打印就能理解了：

因为300ms的setTimeout并不是说300ms之后立马执行，而是300ms之后被放入任务列表里面。等待事件循环，等待回调函数放到主线程执行的时候才能执行代码。如果异步任务列表里面只有它这个macrotask任务，那么就是精确的300ms。但是如果 还有microtast等其它的任务，就不止300ms了。

所以，下面的代码也能很好理解了

for(var i = 0; i < 3; i++) {
    console.log("for:"+i);
    var time=setTimeout(function() {
        console.log("setTime:"+i); 
    }, 300);
　　console.log(time)
}

这个运行的结果是：

1） 当执行for循环的时候，定义了3个定时器，由于setTimeout是异步任务，所以这三个定时器的回调函数，每个都会在300ms之后加入任务队列，并且是macrotask队列。

2） 此时执行代码，输出for：xx，并打印对应定时器的标识。

3） 300ms之后，每个setTimeout的回调函数加入到任务队列，这时候for循环早就执行完毕了。

4） 执行完循环之后，此时相当于主线程栈空了，通知任务队列，把异步任务放到主线程执行，这时候就开始执行setTimeout的回调函数。由于这时setTimeout匿名回调函数保持对外部变量 i 的引用，而此时的 i 由于主线程执行完之后变成了3，所以最终再打印出3个setTime:3。

 

再来分析一下下面的代码：

console.log(1);
setTimeout(function(){
    console.log(2)
},0);
new Promise(function(resolve){
    console.log(3)
    for( var i=100 ; i>0 ; i-- ){
        i==1 && resolve()
    }
    console.log(4)
}).then(function(){
    console.log(5)
}).then(function(){
　　 console.log(6)
});
console.log(7);

1） 由于script也属于macrotask，所以整个script里面的内容都放到了主线程（任务栈）中，按顺序执行代码。然后遇到console.log(1)，直接打印1。

2） 遇到setTimeout，表示在0秒后才加入任务队列，根据第3大点的 第3点注意事项，这个setTimeout会被放到下一个事件循环的macrotask里面，这次event loop不会执行。

3） 执行遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，只有回调 .then（）才是microtask。所以先直接打印3，执行完循环，然后再打印4。然后遇到第一个 .then()，属于microtask，加入到本次循环的microtask队列里面。接着向下执行又遇到一个 .then() ，又加入到本次循环的microtask队列里面。然后继续向下执行。

4） 遇到console.log(7)，直接打印7。直到此时，一个事件循环的macrotask执行完成，然后去查看此次循环是否还有microtask，发现还有刚才的  .then() ，立即放到主线程执行，打印出5。然后发现还有第二个 .then()，立即放到主线程执行，打印出6 。此时microtask任务列表清空完了。到此第一次循环完成。

5） 第二次事件循环，从macrotask任务列表里面找到了第一次放进的setTimeout，放到主线程执行，打印出2。

6） 所以最终的结果就是  1 3 4 7 5 6 2

 

---

 

上面说了这么多，就是为了下面做铺垫

vue的nextTick使用方法：

接收两个参数：

第一个是回调函数，即DOM更新之后需要做的操作。

第二个是回调函数中，this指针的指向。

vue.nextTick(cb,obj)

vm.$nextTick(cb)。 注意实例中使用nextTick的时候，cb回调函数的this指向已经绑定为当前实例了。

这里附上vue 2.6 版本 nextTick源码的链接nextTick，2.5版本与2.6有些不一样。

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {      //第一步
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, \'nextTick\')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {     //第二步
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== \'undefined\') {   //第三步
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

每次调用 Vue.nextTick(cb) ：

1）cb 函数经处理压入 callbacks 数组，并且指定了cb的this指向。

2）pending表示是否正在执行回调即是否已经有异步任务在主线程执行，由于pending这个标识最初为false，所以把它设置为true，然后调用 timerFunc（）。这个是用来触发异步回调函数的。

3）如果没有传入回调函数，并且支持promise的时候，则返回一个promise的调用

4）timerFunc（）最初就看Promise（延迟调用） 、MutationObserver（监听变化）、setImmediate 、setTimeout这四个中谁的兼容当前浏览器，谁就优先用来做异步API来处理回调函数。

 

对于为什么是下一个tick，我有问题：

1）在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。这是官方对于nextTick的说法。

2）在设置了vm.xxx=\'xxx\'的时候，如果立即去DOM的内容，获取到的并不是最新的值，说明DOM的更新一定是异步的，因为同步的话就能获取到修改后的内容了。但是nextTick的回调函数，在调用后要么属于microtask，要么就是macrotask，

3）如果是macrotask则好理解一点，因为执行代码遇到这个macrotask则会被添加到macrotask的末尾，等待event loop 取到它的时候才执行，而执行一次macrotask之后，如果microtask列表为空了，就会执行UI rendering，页面就渲染成最新的内容。这时候是能获取到更新后的内容的。

4）那如果是microtask，就是在当前event loop中需要执行完毕，是属于当前的tick，而这个时候是怎么获取到DOM更新的内容的？？？

 

---

 

更新：

关于最后的几个问题，我认为是我自己想复杂了。首先，vue是怎么渲染的，当然是通过更新 虚拟dom，虚拟dom 更新之后，浏览器才执行 UI rendering。那么vue的 下一个 tick，就一定是 虚拟dom 更新了，获取的是 虚拟 dom的内容，而不是获取浏览器里的真实dom。那这样就能说通就算是 微任务 在本轮tick 中，也能获取到 当前最新的dom内容，因为获取的是 虚拟DOM 的内容。

可以自己试试下面种情况就能明白：

1. 直接操作DOM，修改后立马打印DOM的内容，发现是同步渲染的。

let target = document.getElementById(\'box\');
target.innerText = \'我是修改后的box\';
console.log(target.innerText); // 我是修改后的box

2. 使用 ref 操作DOM的内容，同 1 一样。也是同步渲染的，因为 ref 也是直接操作DOM

this.$refs.refbox.innerText = \'我是修改后的box\';
console.log(this.$refs.refbox.innerText); // 我是修改后的box

3. DOM的内容，绑定在 data里面，这时再去获取DOM的内容，就不是想要的内容了

<div>
    <p ref=\'refbox\'>{{msg}}</p>
</div>

new Vue({
    el:\'#app\' ,
    data:{
       msg:\'我是box\'
    },
    mounted(){
        this.msg = \'我是修改后的box\'
    　　console.log(this.$refs.refbox.innerText);// 我是box
    　　this.$nextTick(() => {
        　　console.log(this.$refs.refbox.innerText); // 我是修改后的box
    　　})
    }
})

相当于只要不是直接操作DOM，而是通过vue去修改的话，就会异步更新，等到 虚拟DOM更新完后，才触发渲染