当触发事件更新dom后,没法在vue中立即获取到dom的最新值,这时候就要用到nextTick函数,它可以帮助我们在下一次Dom更新后执行它的回调函数
<template>
<div ref="divRef">{{ message }}</div>
<button @click="getHeight">获取高度</button>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
const divRef = ref(null);
const message = ref(" ");
const getHeight = () => {
message.value += "啦啦啦啦啦啦啦";
nextTick(() => {
console.log(divRef.value.offsetHeight);
});
};
</script>
