在前端編程中，獲取DOM的高度是經(jīng)常會用到的一個需求，特別是在響應式設計中。本文將介紹如何使用Vue獲取DOM的高度。

在Vue中，可以使用$refs屬性來獲取DOM元素。$refs是Vue實例中預留的屬性，它可以用來指定在模板中指定的某個元素。

<template><div ref="myDiv"></div></template>

上面代碼中，通過ref屬性給div元素起了一個名字，名字為"myDiv"，在代碼中可使用如下方式，來獲取該元素：

this.$refs.myDiv

獲取DOM元素的高度，可以使用offsetHeight屬性。offsetHeight是一個可讀屬性，可以獲取元素自身高度+上下padding和上下border的高度。也就是說，offsetHeight的值就是元素距離頁面頂部的實際高度。

在Vue中，通過結合$refs和offsetHeight就可以得到DOM元素的高度，具體代碼如下所示：

<template><div ref="myDiv"></div></template><script>export default {
mounted() {
const height = this.$refs.myDiv.offsetHeight;
console.log(height);
}
}
</script>

上面代碼中，在mounted生命周期函數(shù)中，通過引用$refs和offsetHeight屬性得到了myDiv元素的高度，并將結果打印在控制臺中。

除了使用offsetHeight，在計算DOM元素的高度時，也可以使用getBoundingClientRect()方法。getBoundingClientRect()是一個常用的實例方法，用來獲取元素的大小、相對于視窗的位置等信息。它返回的是一個矩形對象，包括以下屬性：

• top：元素上邊框離視口頂部的距離
• right：元素右邊框離視口左側的距離
• bottom：元素下邊框離視口頂部的距離
• left：元素左邊框離視口左側的距離
• width：元素自身的寬度
• height：元素自身的高度

一般情況下，我們可以通過getBoundingClientRect()方法來計算出元素距離上、下邊緣的實際高度，具體代碼如下：

<template><div ref="myDiv"></div></template><script>export default {
mounted() {
const topHeight = this.$refs.myDiv.getBoundingClientRect().top;
const bottomHeight = this.$refs.myDiv.getBoundingClientRect().bottom;
const height = bottomHeight - topHeight
console.log(height);
}
}
</script>

上面代碼中，在mounted生命周期函數(shù)中，通過引用$refs和getBoundingClientRect()方法得到了myDiv元素的高度，并將結果打印在控制臺中。

最后，需要注意的是，由于DOM元素的高度在頁面布局完成后才能獲取到，所以在Vue組件中，獲取DOM元素的高度，通常需要在mounted生命周期函數(shù)中進行。此外，由于offsetHeight和getBoundingClientRect()方法都是只讀屬性，所以無法直接修改DOM元素的高度