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

1、使用 ref 屬性

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

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

2、使用 $nextTick 方法

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

上面代碼中，我們?nèi)匀皇褂?ref 屬性為 div 元素賦值，但在 mounted 鉤子函數(shù)中，我們使用 $nextTick 方法來等待 DOM 元素的渲染完成后再獲取元素高度。$nextTick 方法返回一個(gè) Promise 對(duì)象，所以我們使用箭頭函數(shù)獲取 Promise 對(duì)象之后，在其后執(zhí)行需要在 DOM 渲染完成后才執(zhí)行的代碼。

3、使用 Vue.observable 創(chuàng)建響應(yīng)式數(shù)據(jù)

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 方法創(chuàng)建了一個(gè)響應(yīng)式對(duì)象，其中包含了一個(gè)名為 myDivHeight 的屬性，初始化為 0。在 mounted 鉤子函數(shù)中，我們調(diào)用了一個(gè)名為 getMyDivHeight 的方法，在該方法中通過 querySelector 獲取元素并賦值給 myDivHeight 屬性。由于 myDivHeight 是一個(gè)響應(yīng)式對(duì)象，所以在獲取元素高度后，Vue 會(huì)自動(dòng)更新界面中用到該數(shù)據(jù)的部分。

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

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