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

最新推荐文章于 2025-07-11 17:57:36 发布

lu_kuankuan

最新推荐文章于 2025-07-11 17:57:36 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue监听窗口变化

本文链接：https://blog.youkuaiyun.com/lu_kuankuan/article/details/80361852

vue 专栏收录该内容

5 篇文章

订阅专栏

当在Vue的mounted生命周期中使用window.resize事件监听窗口尺寸变化时，可能会遇到无法响应的问题。本文提供一种解决方案，包括在data中定义记录尺寸属性，在mounted时挂载resize事件处理函数，使用watch监听属性变化，并通过优化避免频繁触发导致的页面卡顿。

如果你使用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)
                }
            }
        }