前言

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。简单来说，Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新，nextTick()方法就会在这样的DOM更新循环结束后调用指定的函数。

概念

在 Vue 3 中 nextTick() 方法的行为和 Vue 2 中基本相似，但它进行了一些优化，以提高性能和稳定性。nextTick() 通过利用微任务（microtask）来确保在 DOM 更新之后执行回调，从而避免在同一事件循环中执行 DOM 操作。简单的理解是，当数据更新了，在dom中渲染后，自动执行函数。

方法的使用

nextTick()的基本使用

<code>// 使用 nextTick() 方法

import { ref, nextTick } from 'vue';

const myValue = ref('initial value');

// 在 DOM 更新后执行回调

nextTick(() => {

console.log('DOM 已更新');

});

再onMounted中使用

在该示例中，nextTick() 写onMounted 钩子函数中能确保回调在组件首次挂载后执行，常用于处理与初始渲染相关的逻辑。

// 示例 2: 在 setup() 中使用 nextTick()

import { ref, onMounted, nextTick } from 'vue';

export default {

setup() {

const myValue = ref('initial value');

onMounted(() => {

// 在 DOM 更新后执行回调

nextTick(() => {

console.log('DOM 已更新');

});

});

return {

myValue,

};

},

};

nextTick() 的异步执行

nextTick() 中的回调函数是异步执行的。这意味着即使在同一事件循环中调用多次 nextTick()，它们的回调函数也会按照调用顺序异步执行。

// 示例 3: nextTick() 的异步执行

import { ref, nextTick } from 'vue';

const myValue = ref('initial value');

// 在 DOM 更新后执行第一个回调

nextTick(() => {

console.log('第一个回调执行');

});

// 在 DOM 更新后执行第二个回调

nextTick(() => {

console.log('第二个回调执行');

});

nextTick() 的使用场景

在数据变化后等待DOM更新

这是 nextTick() 最常见的用途。例如，你可能更改了一个数据属性，该属性控制一个元素的可见性。然后你可能想要等待DOM更新以便可以获取该元素的新的宽度或高度。在这种情况下，你可以使用 nextTick() 来确保你的代码在DOM更新后执行。

<template>

<div ref="myDiv">{ { message }}</div> code>

</template>

<script>

import { ref, nextTick } from 'vue';

export default {

setup() {

const message = ref('Hello Vue!');

const myDiv = ref(null);

function updateMessage() {

message.value = 'Updated!';

nextTick(() => {

console.log(myDiv.value.textContent); // 输出: Updated!

});

}

return {

message,

myDiv,

updateMessage

};

}

};

</script>

在创建或销毁组件后等待DOM更新