flushing

vue的异步更新机制，学习vue源码的总结

vue的双向绑定基于Property以及对于数组原型改变数组⾃⾝的7种⽅法进⾏增强来实现。

在其值发⽣改变时，通过拦截数据时设置的dep实例调⽤()即循环dep实例的subs数组（⼀个由wacher所组成的数组），调

⽤每个watcher的update⽅法

update将会分作三种情况执⾏，此处对于lazy为真情况（即computed）以及sync为真（同步直接执⾏watcher的run进⾏更新）不做

深究

在⼀般情况下，update实际是调⽤了queueWatcher函数将watcher加⼊全局的queue数组，通过执⾏nextTick⽅法，其回调函数为

flushSchedulerQueue（将queue数组进⾏排序，排序原因源码有注释，并执⾏watcher的run⽅法）

nextTick：将每个flushSchedulerQueue放⼊全局的callbacks，若此时浏览器的异步任务队列中没有⼀个叫flushCallbacks的函

数，则执⾏timerFunc函数，将flushCallbacks函数放⼊异步任务队列。如果异步任务队列中已经存在flushCallbacks函数，等待

其执⾏完成以后再放⼊下⼀个flushCallbacks函数注意flushCallbacks是在timerFunc(异步函数)⾥执⾏的。ck也是此

⽅法

timerFunc：将任务加⼊异步队列，通过Promi，MutationObrver，tImmediate，tTimeout的优先级进⾏浏览器兼容处理

flushCallbacks：依次执⾏callbacks数组中的⽅法

所以以上简单⾔之其实就是在异步执⾏watcher的run⽅法

if(!flushing){

(watcher)

}el{

//如何出现异步更新已经执⾏还有执⾏queueWatcher的情况

//ifalreadyflushing,splicethewatcherbadonitsid如果已经是flushing状态则将其加⼊queue

//ifalreadypastitsid,itwillberunnextimmediately.如果已经过了它的id，它将被⽴即运⾏

leti=-1

while(i>index&&queue[i].id>){

i--

}

(i+1,0,watcher)

}

这部分代码始终理解不了，如何出现异步更新已经执⾏还有执⾏queueWatcher的情况，queueWatcher始终是在同步执⾏，vue也始终

是⽤最快的异步来进⾏异步更新，是基于未来可能存在的新的异步⽅案考虑？

如果是⼀个⽤户watcher，即watch选项，监听到数据更新，经过异步更新队列的过程，最后开始刷新队列，执⾏->

->最后执⾏watch选项的回调函数，如果回调函数中有更新另⼀个响应式数据的情况，这时候就会触发tter，然后触发依

赖通知更新，接着watcher⼊队。