Vue中的nextTick

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的nextTick相关的知识,希望对你有一定的参考价值。

参考技术A 1、nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致我们对数据的修改不会立刻体现,在DOM变化上,此时如果想要立即获取更新后的DOM状态,就需要使用这个方法。

2、Vue在更新DOM时是异步执行的。只要监听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的DOM操作完成后才调用。

3、所以当我们想在修改数据后立即看到DOM执行结果就需要用到nextTick方法。

4、比如,在干什么的时候就会使用nextTick,传一个回调函数进去,在里面执行DOM操作即可。

5、 简单了解nextTick实现,它会在callbacks里面加入我们传入的函数,然后用timerFunc异步方式调用它们,首选的异步方式会是Promise。这让我明白为什么可以在nextTick中看到DOM操作的结果。

以上是关于Vue中的nextTick的主要内容,如果未能解决你的问题,请参考以下文章

vue3中的 computed

vue3中的computed和watch

Vue基础系列——Vue中的指令(上)

如何在单个文件 vue 组件中的初始化时将道具传递给 vue 组件(vue-loader 中的依赖注入)?

vue如何获取数组的中的第一个对象

Vue基础系列——Vue模板中的数据绑定语法