ref是Vue提供的一個重要特性，可以通過給元素添加ref屬性，在Vue實例內部通過this.$refs來訪問對應的DOM元素。ref除了能夠訪問DOM元素，還可以讓我們方便地對DOM進行操作。例如，在Vue項目中，經常需要根據某種操作來刪除某個DOM元素，而此時就可以使用ref來實現。

首先，需要在DOM節點中添加ref屬性。例如，我們要刪除一個文本框，就可以在該輸入框元素上添加一個ref屬性，如下所示：

<input type="text" ref="inputText">

在Vue實例中，可以通過this.$refs來訪問這個輸入框的DOM節點。例如，我們可以通過點擊一個按鈕來刪除這個文本框，代碼如下所示：

<button @click="deleteElement">刪除文本框</button>
...
methods: {
deleteElement() {
const element = this.$refs.inputText;
element.parentNode.removeChild(element);
}
}

這段代碼中，我們首先給按鈕添加了一個@click事件，當點擊該按鈕時，會調用deleteElement方法。這個方法中，我們通過this.$refs.inputText來獲得文本框的DOM節點，并通過parentNode和removeChild方法來從DOM中刪除該節點。

除了通過parentNode和removeChild方法來刪除DOM節點，還可以使用Vue提供的$destroy方法來銷毀實例和其所有子實例，同時也會銷毀與之關聯的DOM元素。例如，我們可以通過以下代碼來銷毀一個Vue實例：

methods: {
destroyInstance() {
this.$destroy();
const element = this.$el;
element.parentNode.removeChild(element);
}
}

在該代碼中，我們首先調用了this.$destroy()來銷毀Vue實例，然后使用this.$el來獲取與該實例關聯的DOM元素，再通過parentNode和removeChild方法來從DOM中刪除該節點。

需要注意的是，在刪除DOM節點之前，要確保該節點已經完全渲染到了頁面中，否則可能會出現未知的錯誤。因此，在刪除DOM節點之前，可以使用Vue提供的$nextTick方法來保證DOM已經完全渲染。例如，在下面的示例中，我們使用$nextTick來保證文本框已經渲染到了頁面中，才進行刪除操作：

methods: {
deleteElement() {
this.$nextTick(() =>{
const element = this.$refs.inputText;
element.parentNode.removeChild(element);
});
}
}

上述代碼中，我們在$nextTick方法中傳入了一個回調函數，在該回調函數中進行刪除操作。這樣就可以確保DOM已經完全渲染后才刪除元素，避免了出現問題。

在Vue中使用ref進行刪除操作非常方便，只需要在DOM節點中添加ref屬性，然后通過this.$refs訪問對應的DOM節點，即可進行刪除操作。同時，在刪除DOM節點之前要進行必要的檢查和處理，例如使用$nextTick來確保DOM已經渲染等，以免出現問題。