無(wú)論是Web開(kāi)發(fā)還是移動(dòng)端開(kāi)發(fā)，操作系統(tǒng)的窗口大小都有可能會(huì)影響我們的實(shí)現(xiàn)效果。在Vue中，如何獲取當(dāng)前窗口的大小呢？

Vue通過(guò)引入第三方庫(kù)來(lái)獲取窗口的大小，其中比較常用的是使用window對(duì)象。通常可以在created或mounted的生命周期函數(shù)中獲取window的大小，其中mounted是Vue組件優(yōu)先渲染到DOM節(jié)點(diǎn)后才會(huì)觸發(fā)的事件。具體實(shí)現(xiàn)代碼如下:

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解析完之后立即觸發(fā)，而mounted事件在DOM渲染完之后觸發(fā)。另外需要注意的是為了防止內(nèi)存泄漏，需要在銷(xiāo)毀組件前手動(dòng)移除resize事件監(jiān)聽(tīng)。

除了通過(guò)window對(duì)象，還有一種獲取窗口大小的方式而不需要使用第三方庫(kù)，那就是使用HTML5的新API——ResizeObserver。雖然這種方法目前還用的較少，但技術(shù)的發(fā)展很可能會(huì)逐漸被廣泛應(yīng)用。代碼實(shí)現(xiàn)如下：

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屬性來(lái)獲取元素的大小。 ResizeObserver在每次測(cè)量完成之后會(huì)觸發(fā)回調(diào)函數(shù)entries，然后我們就可以獲取contentRect屬性了。

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

最后需要提醒一下，無(wú)論是使用window對(duì)象還是使用ResizeObserver，獲取到的僅僅是窗口大小，而非頁(yè)面大小。頁(yè)面大小也就是可見(jiàn)區(qū)域大小，通常可以通過(guò)document.body.clientWidth等屬性獲取。