当前位置：首页 > news >正文

vue3的 nextTick()的使用

news 来源：原创 2024/5/20 15:31:13

引言：

当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API：

import { nextTick } from 'vue'async function increment() {count.value++await nextTick()// 现在 DOM 已经更新了
}

一句话，总结一下就是：当数据更新以后，在dom中完成渲染之后，自动执行该函数。

nextTick() 等待下一次DOM更新刷新的工具方法。nextTick()可以在状态改变后立即使用，以等待DOM更新完成。你可以传递一个回调函数作为参数，或者await返回的Promise。

<script setup>
import { ref, nextTick } from 'vue'const count = ref(0)async function increment() {count.value++// DOM 还未更新console.log(document.getElementById('counter').textContent) // 0await nextTick()// DOM 此时已经更新console.log(document.getElementById('counter').textContent) // 1
}
</script><template><button id="counter" @click="increment">{{ count }}</button>
</template>

或者

<script setup>
import { ref, nextTick } from 'vue'const count = ref(0)async function increment() {count.value++// DOM 还未更新console.log(document.getElementById('counter').textContent) // 0nextTick(()=>{// DOM 此时已经更新console.log(document.getElementById('counter').textContent) // 1})}
</script><template><button id="counter" @click="increment">{{ count }}</button>
</template>

需要注意的是，虽然 $nextTick() 方法可以解决异步更新导致的问题，但如果过度使用该方法会导致性能问题。因此，在实际开发中，只有在必要的情况下才应该使用 $nextTick() 方法。

参考传送门：5.7 Vue中this.$nextTick()方法的使用及代码示例-CSDN博客