Vue系列-异步事件队列（nextTick）

原文链接： https://www.jianshu.com/p/bac2c0ae6328

when:Vue什么时候用到异步事件队列

1、VUE通过设置对象属性的setter拦截，可以在属性值发生变化时触发相关依赖，这时的依赖回调默认不是立即执行，而是将其放入到异步事件队列。

2、调用nextTick方法时，nextTick是将回调方法放入到异步事件队列，不立即触发。

what:异步事件队列的触发

因为JS是单线程执行的，同一时刻只能执行一处代码，如果遇到耗时长的任务如ajax请求之类的，等待会过长。

所以在单线程的基础上，多了异步事件队列的概念，这种耗时长的任务由底层开辟出单独的线程去处理，处理成功后，往异步事件队列插入回调。

JS主流程执行结束之后，会定时去异步事件队列里检索是否有回调，若有，将其出队由主任务执行，依次循环

异步事件队列.png

如
Vue.nextTick(function(){
  console.log("tick")
})
for(var index=0;index<3;index++){
      console.log(index);
}
sleep(1000);//自定义函数，表示睡眠1s
打印结果会是：
0
1
2
（等待1s多的时间）
tick

how:异步事件队列实现原理

通过Promise对象或是setTimeout都可以实现
Promise.resolve().then(fn),setTimeout(fn,0), js引擎都会将其放入异步事件队列

如
var promise=Promise.resolve();
var isTrigger=false;
var queueTasks=[];
function startQueueTask(){  
    var task=queueTasks.splice(0);
    task.forEach(function(fn){
      fn();
    })
    isTrigger=false;
}
function nextTick(fn){
    queueTasks.push(fn);

    if(!isTrigger){
        isTrigger=true;
        promise.then(startQueueTask);
    }
}

nextTick(function(){console.log(1)})

nextTick(function(){console.log(2)})

console.log(3)
console.log(4);

作者：前端切克闹
链接：https://www.jianshu.com/p/bac2c0ae6328
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。