vue 监听浏览器窗口宽度变化

首先在data中定义要监听的属性，因为watch侦听器监听的是data中的属性,不能直接监听window
export default {
data () {
return {
screenWidth: document.body.clientWidth,
}
}
}

在mouted当中调用window监听resize事件会在窗口或框架被调整大小时触发
mounted(){
let that = this;
window.addEventListener(“resize”, function() {
return (() => {
window.screenWidth= document.body.clientWidth;
that.screenWidth= window.screenWidth;
})();
});
}

最后在watch监听data中的creenWidth属性就可以了
watch:{
screenWidth:{
handler(newVal,oldVal){
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if(!this.timer){
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
this.screenWidth = newVal;
this.timer = true;
let that = this;
setTimeout(function(){
// 打印screenWidth变化的值
console.log(that.screenWidth)
that.timer = false;
that.contentWidthChange();//执行自己的逻辑
},400)
}
},
immediate:true,
}
}

注释:
created
实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见;
mounted
挂在完成，也就是模板中的HTML渲染到HTML页面中，mounted只会执行一次。