为什么要用nextTick
请看如下一段代码
1new Vue({ 2 el: '#app', 3 data: { 4 list: [] 5 }, 6 mounted: function () { 7 this.get() 8 }, 9 methods: { 10 get: function () { 11 this.$http.get('/api/article').then(function (res) { 12 this.list = res.data.data.list 13 // ref list 引用了ul元素，我想把第一个li颜色变为红色 14 this.$refs.list.getElementsByTagName('li')[0].style.color = 'red' 15 }) 16 }, 17 } 18})
我在获取到数据后赋值给数据模型中list属性，然后我想引用ul元素找到第一个li把它的颜色变为红色，但是事实上，这个要报错了，在执行这句话时，ul下面并没有li，也就是说刚刚进行的赋值操作，当前并没有引起视图层的更新。
因此，在这样的情况下，vue给我们提供了$nextTick方法，如果我们想对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，vue就会给我们做这个工作。
源码解读
这个函数很简单，vue2.2.6版本 450行开始。
首先，这个函数是采用了一个单利模式还是什么创建的一个闭包函数
1var callbacks = []; // 缓存函数的数组 2var pending = false; // 是否正在执行 3var timerFunc; // 保存着要执行的函数
首先定义了一些变量供之后使用，下面是一个函数
1function nextTickHandler () { 2 pending = false; 3 // 拷贝出函数数组副本 4 var copies = callbacks.slice(0); 5 // 把函数数组清空 6 callbacks.length = 0; 7 // 依次执行函数 8 for (var i = 0; i < copies.length; i++) { 9 copies[i](); 10 } 11}
这个函数就是$nextTick内实际调用的函数。
接下来，是vue分了三种情况来延迟调用以上这个函数，因为$nextTick目的就是把传进来的函数延迟到dom更新后再使用，所以这里依次优雅降序的使用js的方法来做到这一点。
1、promise.then延迟调用
1if (typeof Promise !== 'undefined' && isNative(Promise)) { 2 var p = Promise.resolve(); 3 var logError = function (err) { console.error(err); }; 4 timerFunc = function () { 5 p.then(nextTickHandler).catch(logError); 6 if (isIOS) { setTimeout(noop); } 7 }; 8}
如果浏览器支持Promise，那么就用Promise.then的方式来延迟函数调用，Promise.then方法可以将函数延迟到当前函数调用栈最末端，也就是函数调用栈最后调用该函数。从而做到延迟。
2、MutationObserver 监听变化
1else if (typeof MutationObserver !== 'undefined' && ( 2 isNative(MutationObserver) || 3 MutationObserver.toString() === '[object MutationObserverConstructor]' 4)) { 5 var counter = 1; 6 var observer = new MutationObserver(nextTickHandler); 7 var textNode = document.createTextNode(String(counter)); 8 observer.observe(textNode, { 9 characterData: true 10 }); 11 timerFunc = function () { 12 counter = (counter + 1) % 2; 13 textNode.data = String(counter); 14 }; 15}
MutationObserver是h5新加的一个功能，其功能是监听dom节点的变动，在所有dom变动完成后，执行回调函数。
具体有一下几点变动的监听
-
childList：子元素的变动
-
attributes：属性的变动
-
characterData：节点内容或节点文本的变动
-
subtree：所有下属节点（包括子节点和子节点的子节点）的变动
可以看出，以上代码是创建了一个文本节点，来改变文本节点的内容来触发的变动，因为我们在数据模型更新后，将会引起dom节点重新渲染。
所以，我们加了这样一个变动监听，用一个文本节点的变动触发监听，等所有dom渲染完后，执行函数，达到我们延迟的效果。
3、setTimeout延迟器
1else { 2 timerFunc = function () { 3 setTimeout(nextTickHandler, 0); 4 }; 5 }
利用setTimeout的延迟原理，setTimeout(func, 0)会将func函数延迟到下一次函数调用栈的开始，也就是当前函数执行完毕后再执行该函数，因此完成了延迟功能。
闭包函数
1return function queueNextTick (cb, ctx) { 2 var _resolve; 3 callbacks.push(function () { 4 if (cb) { cb.call(ctx); } 5 if (_resolve) { _resolve(ctx); } 6 }); 7 // 如果没有函数队列在执行才执行 8 if (!pending) { 9 pending = true; 10 timerFunc(); 11 } 12 // promise化 13 if (!cb && typeof Promise !== 'undefined') { 14 console.log('进来了') 15 return new Promise(function (resolve) { 16 _resolve = resolve; 17 }) 18 } 19 }
这个return的函数就是我们实际使用的闭包函数，每一次添加函数，都会想callbacks这个函数数组入栈。然后监听当前是否正在执行，如果没有，执行函数。这个很好理解。下面一个if是promise化。
1this.$nextTick(function () { 2}) 3// promise化 4this.$nextTick().then(function () { 5}.bind(this))
以上代码中第二种写法我们不常见把，直接调用$nextTick函数然后用promise格式去书写代码，不过这个then里面需要手动绑定this，vue内部没有给做处理。