vue之理解异步更新 --- nextTick

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

默认情况下，vue中DOM的更新是异步执行的，理解这一点非常重要。

当侦测到数据变化时，Vue会打开一个队列，然后把在同一个事件循环（event loop）当中观察到的数据变化的watcher推送进入这个队列，加入一个watcher在一个事件循环中被触发了多次，它只会被推送到队列中一次，然后在进入下一次的事件循环时，Vue会清空队列并进行必要的DOM更新，。在内部，Vue 会使用 MutationObserver 来实现队列的异步处理，如果不支持则会回退到 setTimeout(fn, 0)。

举例来说：

当你设置 vm.someDate = ' new value ' 时， DOM并不会马上更新，而是在异步队列中被清楚，也就是在下一个事件循环中开始执行更新，如果你希望通过更新的DOM状态去做某些事情，那么就必须留意这个细节，尽管vue.js鼓励开发者用“数据驱动”的方式想问题，避免直接操作DOM，但是有时候你可能是想要使用某个熟悉的jQuery插件这种情况该怎么办呢？

你可以在数据改变之后，理解调用 Vue.nextTick(callback)，并把你要做的事情放在回调函数中。当Vue.nextTick的回调函数执行时，DOM就是已经更新后的状态了。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
</head>
<body>
<div id="example">{{msg}}</div> <script>
var vm = new Vue({
el: "#example",
data: {
msg: "hello"
}
});
vm.msg = "zzw"
alert(vm.$el.textContent === "zzw");
Vue.nextTick(function () {
alert(vm.$el.textContent === "zzw");
});
</script>
</body>
</html>

通过这个例子就可以很好的理解了。

除此之外，也有一个实例方法vm.$nextTick() ，这个方法和全局的Vue.nextTick 的功能一样，但是更方便在组件内部使用，因为它不需要全局的Vue变量，另外它的回调函数中的 this上下文会自动绑定到它的Vue实例中。

Vue.component('example', {
template: '<span>{{msg}}</span>',
data: function () {
return {
msg: 'not updated'
}
},
methods: {
updateMessage: function () {
this.msg = 'updated'
console.log(this.$el.textContent) // => 'not updated'
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'updated'
})
}
}
})

参考文章：细节与最佳实践