Vue是一款前端框架，它使用虛擬DOM，通過(guò)對(duì)比前后兩棵虛擬DOM樹(shù)的差異，最終實(shí)現(xiàn)DOM的渲染。在Vue開(kāi)發(fā)中，有時(shí)候需要獲取DOM元素，這時(shí)可以使用Vue提供的$refs來(lái)進(jìn)行DOM元素的獲取。

首先，在Vue的template中聲明一個(gè)DOM元素，并為其設(shè)置一個(gè)ref屬性，如下所示：

<template>
<div>
<input type="text" ref="myInput">
</div>
</template>

這里我們聲明了一個(gè)文本輸入框，為其設(shè)置了一個(gè)ref屬性，屬性值為“myInput”。

接下來(lái)，在Vue實(shí)例中，可以通過(guò)this.$refs來(lái)獲取DOM元素，如下所示：

<script>
export default {
mounted() {
const inputEl = this.$refs.myInput;
console.log(inputEl);
}
}
</script>

在Mounted生命周期函數(shù)中，通過(guò)this.$refs.myInput獲取文本輸入框元素，并將其賦值給一個(gè)變量inputEl。最后使用console.log打印輸出inputEl。

需要注意的是，在Vue 3中，獲取DOM元素的方式略有變化，使用$refs時(shí)需要在setup函數(shù)中進(jìn)行操作，如下所示：

<template>
<div>
<input type="text" ref="myInput">
</div>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
setup() {
const myInput = ref(null);
onMounted(() => {
console.log(myInput.value);
});
return {
myInput
}
}
}
</script>

Vue 3中使用了Composition API，可以使用ref函數(shù)來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù)myInput，并在onMounted中通過(guò)myInput.value來(lái)獲取DOM元素。