【vue】nextTick的使用

简言

nextTick是Vue等待下一次 DOM 更新刷新的工具方法。
当我们更新dom数据后,需要在后面立即获取更新后的页面数据,就可以使用它。

nextTick

当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。

nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。你可以传递一个回调函数作为参数,或者 await 返回的 Promise。
注意:

  • nextTick是vue实例里的方法,要在vue组件里使用。
  • 异步方法。
<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM 还未更新
      console.log(document.getElementById('counter').textContent) // 0

      await nextTick()
      // DOM 此时已经更新
      console.log(document.getElementById('counter').textContent) // 1
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

结语

nextTick涉及到js的事件循环机制,通过setTimeout(fn,0)可以实现它,或者使用比较新的专用事件处理api MutationObserver 。
nextTick是一个较为重要的方法,恰当的使用它可以解决问题和提高性能。

你可能感兴趣的:(vue3,vue.js)