今天我們來討論Vue中取最后錨的幾種方法。

方法1：使用ref

在Vue中，ref可以用來訪問組件中的元素或子組件。我們可以在元素上設置ref屬性，然后在組件實例中使用this.$refs來獲取該元素，再使用lastChild屬性獲取其最后一個子節點。比如：

<template>
<div ref="myElement">
<p>我是第一個子節點</p>
<p>我是第二個子節點</p>
<p>我是第三個子節點</p>
</div>
</template>
<script>
export default {
mounted() {
const lastChild = this.$refs.myElement.lastChild;
console.log(lastChild);
}
}
</script>

在mounted鉤子中使用this.$refs獲取了myElement元素，然后使用lastChild獲取最后一個子節點，結果應該是<p>我是第三個子節點</p>。

方法2：使用querySelector

querySelector是JavaScript中常用的獲取元素的方法，它也可以在Vue中的mounted鉤子中使用。我們可以在mounted鉤子中使用document.querySelector或element.querySelector來獲取元素，再使用lastChild屬性獲取其最后一個子節點。比如：

<template>
<div class="my-element">
<p>我是第一個子節點</p>
<p>我是第二個子節點</p>
<p>我是第三個子節點</p>
</div>
</template>
<script>
export default {
mounted() {
const lastChild = document.querySelector(".my-element").lastChild;
console.log(lastChild);
}
}
</script>

使用querySelector選擇class為my-element的元素，然后使用lastChild屬性獲取該元素的最后一個子節點，結果應該是<p>我是第三個子節點</p>。

方法3：使用nextSibling

在Vue中，每個元素都有一個nextSibling屬性，它可以獲取下一個兄弟節點。我們可以先獲取最后一個子節點，再使用nextSibling屬性來獲取上一個兄弟節點，即倒數第二個節點。比如：

<template>
<div class="my-element">
<p>我是第一個子節點</p>
<p>我是第二個子節點</p>
<p>我是第三個子節點</p>
</div>
</template>
<script>
export default {
mounted() {
let lastChild = document.querySelector(".my-element").lastChild;
while (lastChild.nodeType !== 1) {
lastChild = lastChild.previousSibling;
}
const previousSibling = lastChild.previousSibling;
console.log(previousSibling);
}
}
</script>

首先使用querySelector選擇class為my-element的元素，然后獲取該元素的最后一個子節點。接著使用一個while循環，一直向前查找直到找到節點類型為1的子節點，也就是<p>我是第三個子節點</p>。最后使用previousSibling屬性獲取該節點的上一個兄弟節點，即<p>我是第二個子節點</p>。

以上就是Vue中取最后錨的幾種方法，每種方法都有其適用的場景，具體使用哪種方法需要根據實際情況而定。