当前位置：首页 > news >正文

获取 DOM 与 nextTick：Vue 中的 DOM 操作

news 2025/6/22 10:42:24

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在 Vue 中，有时你需要在数据变化后操作 DOM。Vue 提供了 nextTick 函数来确保在 DOM 更新完成后执行代码。

获取 DOM

在 Vue 中，可以通过 ref 属性来获取 DOM 元素的引用。

使用 `ref` 获取 DOM 元素

<template>
<div ref="myDiv">Hello, Vue!</div>
</template><script>
import { ref, onMounted } from 'vue';export default {
setup() {
const myDiv = ref(null); // 创建一个 ref 来引用 DOM 元素onMounted(() => {
console.log(myDiv.value); // 访问 DOM 元素
});return { myDiv };
}
};
</script>

在上面的例子中，ref="myDiv" 将用于在模板中标记 DOM 元素，而在 setup 函数中通过 ref 创建的响应式引用 myDiv 将用于在 JavaScript 中访问该元素。

nextTick

nextTick 是一个 Vue 提供的全局 API，用于在下一次 DOM 更新循环结束后执行回调函数。

使用 `nextTick`

import { ref, nextTick } from 'vue';const message = ref('Hello');function updateMessage() {
message.value = 'Hello, Vue3!';
nextTick(() => {
// 这里的代码将在 DOM 更新后执行
console.log('DOM has been updated');
});
}

在上面的例子中，当 message 的值改变时，Vue 会安排一次 DOM 更新。使用 nextTick 可以确保在 DOM 更新完成后执行特定的代码。

在组件中使用 `nextTick`

<template>
<div>{{ message }}</div>
<button @click="updateMessage">Update Message</button>
</template><script>
import { ref, nextTick } from 'vue';export default {
setup() {
const message = ref('Hello');function updateMessage() {
message.value = 'Hello, Vue3!';
nextTick(() => {
console.log('DOM updated with new message');
});
}return { message, updateMessage };
}
};
</script>