$nextTick

Vue 更新DOM是异步执行的，修改数据后，视图不会立即更新，会等同一事件循环中的所有数据都变化后再统一更新视图，如果想修改数据 立即就能对修改后的视图进行操作 可以使用$nextTick

使用场景：

        操作DOM元素：数据变化后，立即对修改后的DOM元素进行操作

        获取最新DOM状态：在数据变化后，可使用$nextTick能确认DOM已经更新，然后再进行相关操作

        执行延迟操作：所有的DOM更新 和 计算完成后，再进行一些操作，可以用$nextTick

<template>

  <div>

    <button @click="updateData">Update Data</button>

    <div ref="myDiv">{{someData}}</div>

  </div>

</template>

<script>

export default {

  data () {

    return {

      someData: 'some text'

    }

  },

  methods: {   

    updateData () {

      // 更新数据

      this.someData = 'new data'

      // 等待 DOM 更新完成后执行操作

      this.$nextTick(() => {

        console.log('DOM has been updated')

   

        this.$refs.myDiv.textContent = 'Updated text'

      })

    }

  }

}

</script>

点击【Update Data]按钮：