vue2与vue3中 nextTick() 的作用和基本使用

一、作用

        在Vue.js中，nextTick是一个重要的方法，它用于在下次 DOM 更新循环结束之后执行某个回调。由于Vue的DOM更新是异步的，当数据发生变化时，DOM并不会立即更新，而是在下一个事件循环中进行更新。因此，如果你需要在数据变化后立即获取或操作更新后的DOM，就需要使用nextTick。

        在Vue2和Vue3中，nextTick的基本使用和功能相似，但由于Vue3在响应式系统、组件和模块化、编译优化等方面的改进，nextTick在某些方面可能有所不同。

二、基本使用

注意：在使用 nextTick 时，如果你需要访问 DOM 元素，记得要使用 Vue 的 ref 特性来引用 DOM 元素，因为直接操作 DOM 可能会导致不可预期的行为。

在Vue2中:

可以通过this.$nextTick来调用nextTick。

具体demo如下：

<template>
    <button ref="tar" 
        type="button" 
        name="button" 
        @click="testClick">{{content}}</button>
</template>
 
<script>
    export default {
        data () {
            return {
                content: '初始值'
            }
        }
　　　　 methods: {
　　　　　　 testClick(){
　　　　　　　　 this.content = '改变了的值'
　　　　　　　　 // 这时候直接打印的话，由于dom元素还没更新
　　　　　　　　 // 因此打印出来的还是未改变之前的值
　　　　　　　　 console.log(this.$refs.tar.innerText) // 初始值
　　　　　　 }
　　　　 }
    }
</script>

        this.$nextTick这个方法在这里的作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来。

 methods：{
    testClick() {
        this.content = '改变了的值'
        let that = this
        this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            console.log(that.$refs.tar.innerText) // 改变了的值
        })
    }
}

在Vue3中: 

1. 直接使用 Vue 实例的 nextTick 方法。

具体demo如下： 

<template>
  <div>{{ message }}</div>
</template>
 
<script>
import { ref, nextTick } from 'vue'
 
export default {
  setup() {
    const message = ref('Hello')
 
    function updateMessage() {
      message.value = 'Updated'
      nextTick(() => {
        // DOM 更新后的操作
        console.log(document.querySelector('div').textContent)
      })
    }
 
    return { message, updateMessage }
  }
}
</script>

/*
在这个例子中，当 message 更新为 'Updated' 后，
nextTick 方法会在下一次 DOM 更新后执行，
此时它会打印出更新后的 DOM 元素的文本内容。
*/ 

2. 使用 await nextTick() 在 async 函数中等待 DOM 更新。

具体demo如下：  

<template>
  <div ref="divElement">{{ message }}</div>
</template>
 
<script>
import { ref, nextTick } from 'vue'
 
export default {
  setup() {
    const message = ref('Hello')
    const divElement = ref(null)
 
    async function updateMessage() {
      message.value = 'Updated'
      await nextTick()
      console.log(divElement.value.textContent)
    }
 
    return { message, updateMessage, divElement }
  }
}
</script>

/*
在这个例子中，updateMessage 函数是一个 async 函数。
message 被更新后，使用 await nextTick() 等待 DOM 更新。
一旦 DOM 更新完成，它会打印出更新后的 DOM 元素的文本内容。
*/