简介
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变动完成后，执行回调函数。
具体有一下几点变动的监听
可以看出，以上代码是创建了一个文本节点，来改变文本节点的内容来触发的变动，因为我们在数据模型更新后，将会引起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的写法，虽然我们不经常用，但是有总比没有好。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论