学习vue源码（13）手写$nextTick

this.$nextTick(function(){

})

}

}

})

如果先使用vm.$nextTick注册回调，然后修改数据，则在微任务对垒中先执行使用vm.$nextTick注册的回调，然后执行更新DOM的回调。所以在回调中得不到最新的DOM，因为此时DOM还没有更新。

在事件循环中，必须当微任务队列中的事件都执行完之后，才会从宏任务队列中取出一个事件执行下一轮，所以添加到微任务队列中的任务的执行时机优先于向宏任务队列中添加的任务。

new Vue({

methods:{

example:function(){

setTimeout(_=>{

},0)

this.message = ‘changed’;

}

})

setTimeout属于宏任务，使用它注册的回调会加入到宏任务中。宏任务的执行要比微任务晚，所以即便是先注册，也是先更新DOM后执行setTimeout中设置的回调

4. vm.$nextTick原理

---

vm.$nextTick和全局Vue.nextTick是相同的，所以nextTick的具体实现并不是在Vue原型上的$nextTick方法中，而是抽象成了nextTick方法供两个方法共用。

import { nextTick } from ‘…/util/index’

Vue.prototype.$nextTick = function(fn){

return nextTick(fn,this);

}

Vue原型上的$nextTick方法只是调用了nextTick方法，具体实现其实在nextTick中。

由于vm.$nextTick会将回调添加到任务队列中延迟执行，所以在回调执行前，如果反复调用vm.$nextTick，Vue.js并不会反复将回调添加到任务队列中，只会向任务队列中添加一个任务。(这个我们在上面说过了)

Vue.js内部有一个列表用来存储vm.$nextTick参数中提供的回调。在一轮事件循环中，vm.$nextTick只会向任务队列添加一个任务，多次使用vm.$nextTick只会将回调添加到回调列表中缓存起来。当任务触发时，依次执行列表中的所有回调并清空列表。

（5）nextTick方法的实现方式

const callbacks = [];

let pending = false;

const callbacks = [];

let pending = false;

function flushCallbacks(){

pending = false;

const copies = callbacks.slice(0);

callbacks.length = 0;

for(let i = 0;i<copies.length;i++){

copiesi;

}

}

let microTimerFunc;

const p = Promise.resolve();

microTimerFunc = () =>{

p.then(flushCallbacks)

}

export function nextTick(cb,ctx){

callbacks.push(()=>{

if(cb){

cb.call(ctx);

}

})

if(!pending){

pending = true;

microTimerFunc();

}

}

nextTick(function(){

console.log(this.name);//Berwin

},{name:‘Berwin’})

解释上面代码

1、通过数组callbacks来存储用户注册的回调。

2、声明了变量pending来标记是否已经向队列中添加一个任务了。每当向任务队列中插入任务时，将pending设置为true，每当任务被执行时将pending设置为false，这样就可以通过pending的值来判断是否需要向任务队列中添加任务。

3、函数flushCallbacks，即被注册的那个任务。当这个函数被触发时，会将callbacks中的所有函数依次执行，然后清空callbacks，并将pending设置为false。即一轮事件循环中，flushCallbacks只会执行一次。

4、microTimerFunc函数，它的作用是使用Promise.then将flushCallbacks添加到微任务队列中。这个其实就是我们所说的包装成异步。

5、执行nextTick函数注册回调时，首先将回调函数添加到callbacks中，然后使用pending判断是否需要向任务队列中新增任务。

在Vue.js2.4版本之前，nextTick方法在任何地方都使用微任务，但是微任务的优先级太高，在某些场景下可能会出现问题。所以Vue.js提供了在特殊场合下可以强制使用宏任务的方法。

const callbacks = [];

let pending = false;

function flushCallbacks(){

pending = false;

const copies = callbacks.slice(0);

callbacks.length = 0;

for(let i = 0;i<copies.length;i++){

copiesi;

}

}

let microTimerFunc;

let macroTimerFunc = function(){…}

let userMacroTask = false;

const p = Promise.resolve();

microTimerFunc = () =>{

p.then(flushCallbacks)

}

export function withMacroTask(fn){

return fn._withTask || (fn_withTask = function({

userMacroTask = true;

const res = fn.apply(null,arguments);

userMacroTask = false;

retrun res;

}))

}

export function nextTick(cb,ctx){

callbacks.push(()=>{

if(cb){

cb.call(ctx);

}

})

if(!pending){

pending = true;

if(userMacroTask){

macroTimerFunc();

}else{

microTimerFunc();

}

}

}

1、新增了withMacroTask函数，它的作用是给回调函数做一层包装，保证在整个回调函数执行过程中，如果修改了状态（数据），那么更新DOM的操作会被推到宏任务队列中，也就是说，更新DOM的执行时间会晚于回调函数的执行时间。

2、withMacroTask先将变量userMacroTask设置为true，然后执行回调，如果这时候回调中修改了数据（触发了更新DOM的操作），而userMacroTask是true，那么更新DOM的操作会被推送到宏任务队列中。当回调执行完毕后，将userMacroTask恢复为false。

3、被withMacroTask包裹的函数所使用的所有vm.$nextTick方法都会将回调添加到宏任务队列中，其中包括状态被修改后触发的更新DOM的回调和用户自己使用vm.$nextTick注册的回调等。

macroTimerFunc如何将回调添加到宏任务队列中

---

Vue.js优先使用setImmediate，但是它存在兼容性问题，只能在IE中使用，所以使用MessageChannel作为备选方案。如果浏览器也不支持MessageChannel，那么最后会使用setTimeout来将回调添加到宏任务队列中。

if(typeof setImmediate !==‘undefined’ && isNative(setImmediate)){

macroTimerFunc = () =>{

setImmediate(flushCallbacks);

}

}else if(typeof MessageChannel !== ‘undefined’ &&(isNative(MessageChannel)||

MessageChannel.toString()===‘[Object MessageChannelConstructor]’)){

const channel = new MessageChannel();

const port = channel.port2;

channel.port1.onmessage = flushCallbacks;

macroTimerFunc = () =>{

port.postMessage(1);

}

}else{

macroTimerFunc = () =>{

setTimeout(flushCallbacks,0);

}

}

microTimerFunc的实现原理是使用Promise.then，但并不是所有浏览器都支持Promise，当不支持时，会被降级成macroTimerFunc。

if(typeof Promise !== ‘undefined’ && isNative(Promise)){

const p = Promise.resolve();

microTimerFunc = () =>{

p.then(flushCallbacks);

}

}else{

microTimerFunc = macroTimerFunc;

}

官方文档中有一句话：如果没有提供回调且在支持Promise的环境中，则返回一个Promise。

this.$nextTick()

.then(function({

//DOM更新了

}))

要实现这个功能，需要在nextTick中进行判断，如果没有提供回调且当前环境支持Promise，那么返回Promsie，并且在callbacks中添加一个函数，当这个函数执行时，执行Promise 的resolve即可。

export function nextTick(cb,ctx){

let _resolve;

callbacks.push(()=>{

if(cb){

cb.call(ctx);

}else if(_resolve){

_resolve(ctx);

}

})

if(!pending){

pending = true;

if(userMacroTask){

macroTimerFunc();

}else{

microTimerFunc();

}

}

if(!cb && typeof Promise !== ‘undefined’){

return new Promise(resolve =>{

_resolve = resolve;

})

}

}

5. 完整的代码

---

const callbacks = [];

let pending = false;

function flushCallbacks(){

pending = false;

const copies = callbacks.slice(0);

callbacks.length = 0;

for(let i = 0;i<copies.length;i++){

copiesi;

}

}

let microTimerFunc;

let macroTimerFunc;

let userMacroTask = false;

if(typeof setImmediate !==‘undefined’ && isNative(setImmediate)){

macroTimerFunc = () =>{

setImmediate(flushCallbacks);

}

}else if(typeof MessageChannel !== ‘undefined’ &&(isNative(MessageChannel)||

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。