無論是Web開發還是移動端開發，操作系統的窗口大小都有可能會影響我們的實現效果。在Vue中，如何獲取當前窗口的大小呢？

Vue通過引入第三方庫來獲取窗口的大小，其中比較常用的是使用window對象。通常可以在created或mounted的生命周期函數中獲取window的大小，其中mounted是Vue組件優先渲染到DOM節點后才會觸發的事件。具體實現代碼如下:

created () {
this.getWindowSize()
},
mounted () {
this.getWindowSize()
window.addEventListener('resize', this.getWindowSize, false)
},
destroyed () {
window.removeEventListener('resize', this.getWindowSize, false)
},
methods: {
getWindowSize () {
this.windowHeight = window.innerHeight
this.windowWidth = window.innerWidth
}
}

上述代碼中，created事件在Vue組件不同于mounted事件，created事件在template解析完之后立即觸發，而mounted事件在DOM渲染完之后觸發。另外需要注意的是為了防止內存泄漏，需要在銷毀組件前手動移除resize事件監聽。

除了通過window對象，還有一種獲取窗口大小的方式而不需要使用第三方庫，那就是使用HTML5的新API——ResizeObserver。雖然這種方法目前還用的較少，但技術的發展很可能會逐漸被廣泛應用。代碼實現如下：

created () {
this.registerResizeObserver()
},
destroyed () {
this.unregisterResizeObserver()
},
methods: {
registerResizeObserver () {
this.resizeObserver = new ResizeObserver(entries =>{
const { width, height } = entries[0].contentRect
this.$nextTick(() =>{
this.windowWidth = width
this.windowHeight = height
})
})
this.resizeObserver.observe(document.body)
},
unregisterResizeObserver () {
this.resizeObserver.unobserve(document.body)
}
}

上述代碼中我們使用了comstentRect屬性來獲取元素的大小。 ResizeObserver在每次測量完成之后會觸發回調函數entries，然后我們就可以獲取contentRect屬性了。

需要注意的是，ResizeObserver不支持IE，所以只適用于現代化瀏覽器。

最后需要提醒一下，無論是使用window對象還是使用ResizeObserver，獲取到的僅僅是窗口大小，而非頁面大小。頁面大小也就是可見區域大小，通常可以通過document.body.clientWidth等屬性獲取。