一文了解 Vue3 的 nextTick 大致信息

nextTick 是 Vue 3 中用于完成数据绑定和 DOM 更新后执行的方法，非常有用，也是 Vue 的一道比较常见的面试题。

1. 基本用法

nextTick 是一个异步方法，它允许我们在下一个 DOM 更新后执行回调函数。当更改了响应式数据并需要在更新后的 DOM 元素上执行操作时，可以使用 nextTick。

html 复制代码

<template>
  <div>
    <p ref="pRef">message：{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'

const message = ref('Hello, World!')
const pRef = ref(null)

const updateMessage = () => {
  message.value = 'Message Updated!' // 在 DOM 更新后执行
  nextTick(() => {
    console.log(pRef.value.textContent) // 输出 'Message Updated!'
  })
}
</script>

2. 典型的使用场景

1、操作更新后的 DOM 元素

比如获取某个元素的大小、滚动条位置或更新样式等。

html 复制代码

<template>
  <div>
    <div ref="box" :style="{ height: boxHeight + 'px' }" style="border: 5px solid chartreuse; ">Content</div>
    <button @click="increaseHeight">Increase Height</button>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const boxHeight = ref(50);
const box = ref(null);

const increaseHeight = () => {
  boxHeight.value += 50;
  nextTick(() => {
    console.log(box.value.clientHeight); // 获取更新后的高度
  });
};
</script>

2、与外部库的集成

当使用某些外部库来操作 DOM，例如图表库、动画库或其他需要 DOM 状态的库时，通常需要确保 DOM 完成更新再执行库的操作。

html 复制代码

<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import Chart from 'xxx-chart-library'

const chart = ref(null)

onMounted(() => {
  nextTick(() => {
    new Chart(chart.value, {
      // Chart options
    })
  })
})
</script>

3. nextTick 与事件循环

📢面试题

1、事件循环与任务队列

JavaScript 的事件循环分为宏任务（macrotask）和微任务（microtask）。微任务的优先级高于宏任务，会在当前任务执行完之后立即执行，而不会等到下一次事件循环。

当调用 nextTick 时，Vue 将回调函数放入微队列中。因此，nextTick 的回调会在当前的同步代码执行完，并且在任何新的渲染和重新绘制之前执行。

2、DOM 更新机制

Vue 的响应式系统会在数据变化时自动触发视图的更新，但这些更新是 异步批处理的。这意味着当连续多次修改数据时，Vue 不会立即更新 DOM，而是将这些操作缓冲起来，然后在下一个事件循环中一次性执行这些更新。目的是为了提高性能，避免每次数据变更都立即触发 DOM 更新。

3、微任务的实现

在 Vue 3 中，nextTick 在 Vue 内部是通过原生的 Promise.resolve().then() 实现的。这是因为 Promise.then() 会创建一个微任务，保证其回调在 DOM 更新后立刻执行。

如果浏览器环境不支持 Promise，Vue 会降级使用其他微任务实现方式，如 MutationObserver 或 setTimeout 作为最后的兜底方案。

4. 注意事项

1、nextTick 不一定非得使用，Vue 3 的批处理机制已经非常高效，在大多数情况下，不需要手动使用，只有确实需要在 DOM 更新完成后进行操作时才使用。

2、频繁使用 nextTick 可能会影响性能，尤其是在复杂的应用中，因为每次 nextTick 都意味着将一个函数推入微队列。如果没有必要的 DOM 操作，可以通过其他方式优化代码。

3、由于 nextTick 是异步的，它不会阻塞当前的代码执行。因此需要确保在正确的时机调用，以避免访问到未更新的 DOM。