Vue.js 是一款流行的 JavaScript 前端框架，它極大地簡(jiǎn)化了前端開(kāi)發(fā)流程，使得開(kāi)發(fā)者可以更快速地構(gòu)建復(fù)雜的用戶界面。

在 Vue 中，我們通常需要訪問(wèn) DOM 元素來(lái)操作它們的屬性或執(zhí)行其他操作。為此，Vue 提供了一個(gè)內(nèi)置方法叫做 $refs，它可以讓我們輕松地訪問(wèn)組件中的子元素。

<template>  
<div>  
<p ref="myParagraph">Hello World!</p>  
</div>  
</template>  
<script>  
export default {  
mounted() {  
console.log(this.$refs.myParagraph); // 輸出
元素  
}  
};  
</script>

但是，使用 $refs 有時(shí)可能會(huì)引起混淆和問(wèn)題。特別是當(dāng)我們需要在多個(gè)地方訪問(wèn)元素時(shí)，它會(huì)變得更加困難，并且難以維護(hù)和測(cè)試。在這種情況下，Vue 提供了另一個(gè)方法 findDomNode 。

<template>  
<div>  
<p id="myParagraph">Hello World!</p>  
</div>  
</template>  
<script>  
export default {  
mounted() {  
console.log(this.$el.querySelector('#myParagraph')); // 輸出
元素  
}  
};  
</script>

在這個(gè)例子中，我們使用了 $el 屬性來(lái)獲取組件的根元素，然后使用 querySelector 方法獲取了我們需要的元素。

總而言之，findDomNode 和 $refs 都是訪問(wèn) DOM 元素的有用方法，但 findDomNode 提供更好的可讀性和可維護(hù)性。不過(guò)，我們需要根據(jù)具體情況來(lái)選擇使用哪種方法。