持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

nextTick介绍

今天分享一下vue的nextTick函数，当我们触发事件更新dom后，但是没法在vue中立即获取到dom的最新值，这时候就要用到nextTick函数，他可以帮助我们在下一次Dom更新后执行他的回调函数

测试

我们创建一个测试demo，创建一个div在用于在页面展示一串文本，创建一个按钮，按钮可以增加文本，并且获取此时div的高度，div宽度固定，内容增加，会向下增加，高度会增加

<template>
  <div>
    <div class="content" ref="divRef">{{message}}</div>
    <button @click="getHeight">获取高度</button>
  </div>
</template>
<script>
import {ref} from "vue"
export default {
  setup(){
    const divRef = ref(null)
    const message = ref(" ")
    const getHeight = () => {
      message.value += "成成成成成成成成成"
      console.log(divRef.value.offsetHeight);
    }
    return {
      divRef,
      getHeight,
      message
    }
  }
}
</script>
<style>
    .content {
      width:100px
    }
</style>
复制代码

当我们点击按钮时，会立即给message增加一串文本，然后获取此时div的高度，但是此时的vue还没有更新dom，我们根本无法获取dom更新后的高度，只能获取此时div的高度

我们可以看到，第一次我们dom已经更新了，但是获取的高度为0，此时只要引入nextTick函数，就可以解决这个问题

更改后的getHeight函数

const getHeight = () => {
      message.value += "成成成成成成成成成"
      nextTick(() => {
        console.log(divRef.value.offsetHeight);
      })
}
复制代码

此时的运行结果

当我们dom更新后立即就可以获取div的高度

nextTick原理

浏览器事件循环机制

浏览器对于事件的处理是有自己的一套机制，同步代码进入执行栈，异步代码进入异步队列，异步任务分为宏任务和微任务

宏任务与微任务

宏任务是浏览器带来的函数，列如setTimeout、setInterval，这些任务都是宏任务
微任务是语言带来的函数，比如promise的then函数

执行机制

当浏览器执行时，会先执行同步任务，然后执行异步任务，执行异步任务时，会先执行微任务，把微任务队列清空后，再去执行一个宏任务，然后在看此时的微任务队列，如此循环，知道宏任务微任务清空

nextTick执行机制

在vue中更新dom是异步的，当同步任务完成后才会去更新dom，nextTick会把此时的回调添加到异步任务队列中，当dom更新的任务完成后才会去执行nextTick函数

结束

在vue中nextTick是宏任务还是微任务，还真没想这么多，但是应该是微任务，浏览器自带的一些函数才是宏任务，有知道的小伙伴可以留言评论，等下我也会查一下资料，放在评论区，如果你感觉到有帮助，请给我个赞！

vue中nextTick函数使用及原理