官方解释
-
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
-
这样看上去是不是挺懵的，自己在网上看了几篇博客后， 才真正对this.$nextTick的用法及使用场景有了一定的理解。不管怎么说， 与其看一些晦涩难懂的文字概念， 还不如自己实操整几个demo来体会一下。
第一个例子
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app" @click="handleClick" ref="test">{{message}}</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Zeke'
},
created() {
console.log(this.$refs.test)
this.$nextTick(function () {
console.log(this.$refs.test.innerText)
})
}
})
</script>
</html>
- 猜一下输出结果？？？ 对Vue.js生命周期有一定理解的朋友一定知道，在created的阶段，DOM还未创建，这个时候并不能对DOM进行操作，因此，第一个console.log(this.$refs.test)输出的结果必然是underfined，关键在于第二个console.log输出的是什么。 通过控制台得到，第二个console.log输出的刚好是Zeke
第二个例子
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app" @click="handleClick" ref="test">{{message}}</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Zeke'
},
methods: {
handleClick() {
this.message = 'Hello'
console.log(this.$refs.test.innerText)
this.$nextTick(function () {
console.log(this.$refs.test.innerText)
})
}
}
})
</script>
</html>
这次我绑定了一个点击事件，当我触发点击事件时，打印的值又是什么？？？ OK，通过控制我们得到结果是：
Zeke
Hello
-为什么我已经改变了message的值，而我的输出还是Zeke呢？
总结
通过以上连个例子，大概明白this.nextTick是怎么用的了，但是其中背后的原理是什么呢。这是因为：
-
dom更新：在vue中，你修改了data的某一个值，并不会立即反应到该ele中。vue将你对data的更 改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。这就有一个延迟时间了。
-
当执行到nextTick的时候，这是一个异步事件，他也会把这个事件放到一个队列当中，异步事件是 不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行， 新添加的事件都会放在队列末尾。所以，当第一个也就是data的修改执行渲染在页面之后，这个时候执行$nextTick，就能获取dom的东西。
-
同理也是，创建一个setTimeout，他也会放到队列中，当上一个事件执行完之后，才会这个他这个事件，才会执行他里面的回调，也就能成功获取啦。
3612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
