vue中nextTick()

原文链接：

全局 API：常规 | Vue.js (vuejs.org)

等待下一次DOM更新刷新的工具方法

类型：

function nextTick(callback?:() => void): Promise<void>

详细信息

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

nextTick()可以在状态改变后立即执行，以等待DOM更新完成，你可以传递一个回调函数作为参数，或者await返回promise

<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"></button>
</template>

绑在实例上的nextTick()函数

类型

interface ComponentPublicInstance {
  $nextTick(callback?:(this: ComponentPublicInstance) => void): Promise<void>
}

详细信息

和全局版本的nextTick()唯一区别就是组件传递给this.$nextTick()的回调函数会带上this上下文，其绑定了当前组件实例