nextTick和update生命周期源码分析

nextTickinVuevarcallbacks=[];varpending=false;函数nextTick(cb,ctx){var_resolve;callbacks.push(function(){if(cb){try{cb.call(ctx);}catch(e){handleError(e,ctx,'nextTick');}}elseif(_resolve){_resolve(ctx);}});如果(!pending){pending=true;定时器功能（）；}if(!cb&&typeofPromise!=='undefined'){returnnewPromise(function(resolve){_resolve=resolve;})}}可以看到nextTick函数传入的参数是cb传入的函数被打包然后推送到回调数组。然后使用变量pending来确保timerFunc()在一个事件循环中只执行一次。最后如果执行(!cb&&typeofPromise!=='undefined')，判断参数cb不存在，浏览器支持Promise，则返回一个Promise类实例化对象。比如nextTick().then(()=>{})，当_resolve函数执行时，then逻辑就会执行。让我们看一下timerFunc函数的定义。让我们首先看看使用Promise创建一个异步执行的timerFunc函数vartimerFunc;if(typeofPromise!=='undefined'&&isNative(Promise)){varp=Promise.resolve();timerFunc=function(){p.then(flushCallbacks);如果（isIOS）{setTimeout（noop）；}};}发现timerFunc函数调用了flushCallbacks函数，各种异步执行方式。看一下flushCallbacks函数varcallbacks=[];varpending=false;functionflushCallbacks(){pending=false;var副本=callbacks.slice(0);回调.length=0;对于(vari=0;ichildbeforeUpdate->childupdated->parentupdated->nextTickcallback//父组件//子组件//打印结果parentbeforeUpdatechildbeforeUpdatechild的updatedparentupdatednext也很容易理解。beforeUpdate和update虽然也在microtask中执行，但是它所在的microtask是先创建的，所以先执行。如果改成下面的，结果就不一样了first;}//打印结果nextparentbeforeUpdatechildbeforeUpdatechildupdatedparentupdated