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