Vue-nextTick

1、nextTick的使用

定义：将回调推迟到下一次Dom 更新周期之后执行，在更改了一些数据一等待DOM 更新后立即使用它

<template>
  <div>
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <h2 class="title" ref="titleRef">{{message}}</h2>
    <button @click="addMessageContent">添加内容</button>
  </div>
</template>

<script>
  import { ref, onUpdated, nextTick } from "vue";

  export default {
    setup() {
      const message = ref("")
      const titleRef = ref(null)

      const counter = ref(0)

      const addMessageContent = () => {
        message.value += "哈哈哈哈哈哈哈哈哈哈"

        // 更新DOM
        nextTick(() => {
          console.log(titleRef.value.offsetHeight)
        })
      }

      const increment = () => {
        for (let i = 0; i < 100; i++) {
          counter.value++
        }
      }

      onUpdated(() => {
      })

      return {
        message,
        counter,
        increment,
        titleRef,
        addMessageContent
      }
    }
  }
</script>

<style scoped>
  .title {
    width: 120px;
  }
</style>

2、nextTick 的原理

事件循环（event loop）：

        如：Promise.resolve.then(回调函数) 的这个回调函数，nextTick 的回调函数

        如： Dom 事件，setTimeout

事件队列：先进先出

        微任务队列（优先级高）

        宏任务队列（优先级低）

        每次宏任务队列执行任务之前都会先看微任务队列中是否存在微任务

执行顺序：

        1.watch 侦听

        2.组件更新

        3.生命周期回调

        4.nextTick 的回调函数是将放到微任务队列中的最后执行