监听页面高度变化_vue项目如何监听窗口变化，达到页面自适应？

【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架，也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷，但官方库毕竟不可能满足全部需求，因此我们可以通过【监听窗口变化】达到想要的绝大部分自适应效果。

获取窗口宽度：document.body.clientWidth

监听窗口变化：window.onresize

同时回顾一下JS里这些方法：

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body.offsetHeight (包括边线的宽)

我们将document.body.clientWidth赋值给data中自定义的变量：

data:{

screenWidth: document.body.clientWidth

}

在页面mounted时，挂载window.onresize方法：

mounted () {

const that = this

window.onresize = () => {

return (() => {

window.screenWidth = document.body.clientWidth

that.screenWidth = window.screenWidth

})()<