在Vue中，我們可以通過兩種方式獲取元素節點，分別是通過id和ref。這兩種方式各有優缺點，需要根據實際情況選擇使用。

// 使用id獲取元素節點
<div id="app"></div>
const app = document.getElementById('app');
// 使用ref獲取元素節點
<div ref="app"></div>
const app = this.$refs.app;

使用id獲取元素節點的好處是可以通過普通的JavaScript方法來獲取元素，不需要依賴Vue的功能；但是使用id獲取元素節點的缺點是當元素多次出現時可能會引起命名沖突，而且當元素發生變化時，可能會導致獲取不到最新的元素。

相比之下，使用ref獲取元素節點的好處是可以直接在Vue實例中獲取元素節點，而且即使元素發生變化，也能夠獲取到最新的元素；但是使用ref獲取元素節點的缺點是需要依賴Vue的功能，如果使用場景不是Vue的組件中，就只能使用id來獲取元素節點了。

// 使用ref獲取組件實例
<template>
<div ref="component"></div>
</template>
export default {
mounted() {
const component = this.$refs.component;
// ...
}
}

除了簡單的元素節點，使用ref還可以獲取子組件的實例。假設我們有一個父組件和一個子組件：

// 子組件
<template>
<div></div>
</template>
export default {
mounted() {
console.log('子組件實例：', this);
}
}
// 父組件
<template>
<child ref="child"></child>
</template>
<script>
import Child from '@/components/Child.vue';
export default {
components: {
Child
},
mounted() {
console.log('父組件實例：', this);
console.log('子組件實例：', this.$refs.child);
}
}
</script>

在父組件中使用ref可以獲取到子組件的實例，通過子組件的實例可以調用子組件的方法或獲取子組件的屬性。

總的來說，使用id獲取元素節點不依賴Vue的功能，但可能會引起命名沖突和獲取不到最新的元素；使用ref獲取元素節點需要依賴Vue的功能，但可以直接獲取最新的元素和子組件的實例。在實際開發中，需要根據實際場景來選擇使用哪種方式。