如何獲取元素高度是 Web 開發中經常遇到的問題，特別是在使用 Vue 進行開發時。在 Vue 中，我們可以通過以下幾種方式來獲得元素高度。

1、使用 ref 屬性

<div ref="myDiv"></div>
mounted() {
console.log(this.$refs.myDiv.offsetHeight);
}

上面代碼中，我們設置了一個 div 元素，并使用 ref 屬性給該元素賦值為 “myDiv”。在 mounted 鉤子函數中，我們打印出該元素的高度（offsetHeight）。這種方式是獲取元素高度最常用的方式之一。

2、使用 $nextTick 方法

<div ref="myDiv"></div>
mounted() {
this.$nextTick(() =>{
console.log(this.$refs.myDiv.offsetHeight);
});
}

上面代碼中，我們仍然使用 ref 屬性為 div 元素賦值，但在 mounted 鉤子函數中，我們使用 $nextTick 方法來等待 DOM 元素的渲染完成后再獲取元素高度。$nextTick 方法返回一個 Promise 對象，所以我們使用箭頭函數獲取 Promise 對象之后，在其后執行需要在 DOM 渲染完成后才執行的代碼。

3、使用 Vue.observable 創建響應式數據

const app = new Vue({
data: Vue.observable({
myDivHeight: 0
}),
methods: {
getMyDivHeight() {
const myDiv = document.querySelector('#myDiv');
this.myDivHeight = myDiv.offsetHeight;
}
},
mounted() {
this.getMyDivHeight();
}
});

上面代碼中，我們使用 Vue.observable 方法創建了一個響應式對象，其中包含了一個名為 myDivHeight 的屬性，初始化為 0。在 mounted 鉤子函數中，我們調用了一個名為 getMyDivHeight 的方法，在該方法中通過 querySelector 獲取元素并賦值給 myDivHeight 屬性。由于 myDivHeight 是一個響應式對象，所以在獲取元素高度后，Vue 會自動更新界面中用到該數據的部分。

需要注意的是，以上 3 種方式都是在 mounted 鉤子函數中獲取元素高度，因為在 mounted 鉤子函數之前該元素還沒有被渲染到 DOM 中。

除了以上 3 種方式，還有一些其他方法來獲取元素高度，比如使用 getComputedStyle() 方法、在 style 中設置 height 等。但這些方式不如上述 3 種方式穩妥，且可讀性較差，不建議使用。