javascript - 关于Vue 中的this.$nextTick问题

问题描述

问 题

请问在Vue文档中我理解的是只要dom或者数据发生变化完成之后才会执行你定义的this.$nextTick方法 可是我现在比较困惑的是我下面的代码并没有按照我预期的那样执行 想问问大家是什么原因吗

大家能看懂我的意思吗？不懂的话我在补出点 谢谢了

在贴一个连接链接描述

解决方案

我仔细看了下文档，好像你的理解有错误。this.$nextTick并不是在dom更新后才触发的。
官方文档：
可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MutationObserver，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

Vue数据采用异步更新，this.$nextTick只是在异步队列中加入了一个任务，按照正常顺序，this.$nextTick里的函数会在DOM更新后执行。这里你的例子使用了setTimeout（fn,1000）导致异步队列的任务顺序发生改变，所以执行结果与你的 预期不同。如果你了解异步队列的执行方式的话，理解这一点会很容易。
个人理解，倘若错误，还望指正。

这篇关于javascript - 关于Vue 中的this.$nextTick问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！