vue监听浏览器进入页面_Vue 动态监听浏览器窗口变化

为了实现页面的宽度和高度自适应，有时候我们需要根据窗口的变化去改变页内元素的宽高，而 VUE 作为一款轻量级的 MVVM 框架，在监听和处理 BOM 事件时需要在指定的区域进行处理，这里记录两种常用而且比较简单的方法。

方案一：

1.在 data 中去 定义 一个记录宽度是 属性

data: {

return {

screenWidth: document.body.clientWidth // 设置默认值

}

}

2.在 vue mounted 的时候 去挂载一下 window.onresize 方法

mounted () {

const that = this

window.onresize = () => {

return (() => {

window.screenWidth = document.body.clientWidth

that.screenWidth = window.screenWidth

})()

}

}

3.watch 去监听这个 属性值的变化，如果发生变化则讲这个 val 传递给 this.screenWidth

watch: {

screenWidth (val) {

this.screenWidth = val

}

}

4.优化因为频繁触 resize 函数，导致页面卡顿的问题

watch: {

screenWidth (val) {

if (!this.timer) {

this.screenWidth = val

this.timer = true

let that = this

setTimeout(function () {

// that.screenWidth = that.$store.state.canvasWidth

console.log(that.screenWidth)

that.init()

that.timer = false

}, 400)

}

}

}

方案二(推荐使用):

原理：在 mounted 钩子中 全局监听 resize 事件，然后绑定的函数再做具体的处理。

data(){

return {

clientHeight: document.body.clientHeight,

},

},

mounted() {

// 在DOM渲染数据时，设置下区域高度为浏览器可视区域高度．

this.clientHeight = document.body.clientHeight;

// 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．

const _this = this;

window.onresize = function temp() {

_this.clientHeight = document.body.clientHeight;

};

},