理解nextTick

我们先来看一下nextTick的官方解释：

nextTick()：等待下一次 DOM 更新刷新的工具方法。

• 类型

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

• 详细信息

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

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

---

下面我们举个例子理解一下：

添加nextTick之前：

<template>
  <div class="next-tick">
    <ul ref="ulRef">
      <li v-for="(item, index) in items" :key="index"> 
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3']
    }
  },
  methods: {
    add() {
      this.items.push(Math.random())
      console.log('itemsLength', this.items.length) // 4
      
      const ulElem = this.$refs.ulRef
      const length = ulElem.childNodes.length
      console.log('domLength', length) // 3
    }
  }
}
</script>

上边代码点击添加后页面展示如下：

控制台输出：

添加nextTick后：

<template>
  <div class="next-tick">
    <ul ref="ulRef">
      <li v-for="(item, index) in items" :key="index"> 
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3']
    }
  },
  methods: {
    add() {
      this.items.push(Math.random())
       console.log('itemsLength', this.items.length) // 4
      
	  this.$nextTick(() => {
        const ulElem = this.$refs.ulRef
        const length = ulElem.childNodes.length
        console.log('domLength', length) // 4
      })
    }
  }
}
</script>

上边代码点击添加后页面展示如下：

控制台输出：