vue监听窗口变化（修改版）

如果你使用vue遇到在mounted生命周期监听不到window.onrsize的变化时，不防点进来！

下面一部分代码来自网络；

第一步： 先在 data 中去 定义 一个记录宽度或者高度的属性

data: { screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要） }

第二步： 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法

mounted () { const that = this //这里很关键；大部分博客都是这样写的，其实也没有毛病，只不过有时候不起作用； window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() } }

//上面若window.onresize不起作用可以考虑使用下面方法(试试再看)；

const that = this;

     window.addEventListener("resize", function() {

           return (() => {

                window.screenWidth= document.body.clientWidth;

                that.screenWidth= window.screenWidth;

             })();

         });

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

watch: { screenWidth (val) { this.screenWidth = val } }

第四步：优化 因为 频繁 触发 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) } } }