獲得頁面高度是前端開發中的常見需求，特別是在需要根據頁面高度進行布局或動態渲染的情況下。在 Vue 中，我們可以通過多種方式獲取頁面高度，本文將介紹其中的幾種常見方法。

一、通過 window 對象獲取頁面高度

// Vue 組件內部方法
getPageSize() {
let pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log(pageHeight);
}

以上代碼中使用了 window.innerHeight 屬性，該屬性返回瀏覽器窗口的視口高度，即不包括瀏覽器工具欄和操作系統任務欄等的高度。如果 window.innerHeight 不可用，則使用 document.documentElement.clientHeight 或 document.body.clientHeight 進行兼容性處理。這兩個屬性都返回當前文檔的高度（即包括瀏覽器工具欄和操作系統任務欄等的高度），但也可能會存在兼容性問題。

二、通過 Vue 指令獲取頁面高度

// Vue 指令
Vue.directive('page-height', {
inserted: function (el) {
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
el.style.height = windowHeight + 'px';
}
});
// Vue 組件模板

以上代碼中使用了 Vue 自定義指令 v-page-height，該指令在組件掛載時執行，通過 el 參數獲取組件 DOM 元素并設置其高度為 window.innerHeight 獲取到的值，從而實現固定高度的效果。

三、通過 ref 獲取 DOM 元素獲取頁面高度

// Vue 組件模板// Vue 組件內部方法
getPageSize() {
let pageContainerHeight = this.$refs.pageContainer.clientHeight;
console.log(pageContainerHeight);
}

以上代碼中在 div 標簽上添加 ref 屬性，通過 this.$refs.pageContainer 獲取組件中的 DOM 元素，再調用 clientHeight 屬性獲取元素的高度。通過此方式可以更加精確地獲取元素的高度，而不必考慮兼容性問題。

總結

以上三種方法都是通過獲取瀏覽器或 DOM 元素的高度來實現獲取頁面高度的目的。在使用中需要結合具體需求和實際情況進行選擇，以達到更好的效果。