window.onresize监听窗口宽度踩坑 vue

踩坑方法
vue组件监听页面宽度变化最近网上比较常用的方法
此方法可以实现监听窗口变化 但是！ 不支持组件重复循环使用 不支持组件重复循环使用 不支持组件重复循环使用 重要的事情说三遍 ！
此方法在多个相同组件渲染时 只会触发最后一个组件的宽度监听其他的没有触发

mounted() {
        //获取屏幕尺寸
        this.screenWidth = document.body.clientWidth
        window.onresize = () => {
            console.log('高度');
            //屏幕尺寸变化
            return (() => {
                this.screenWidth = document.body.clientWidth
            })()
        }
    },
 
 watch: {
        screenWidth: function (n, o) {
            if (n <= 1200) {
                console.log('屏幕宽度小于1200了')
            } else {
                console.log('屏幕宽度没有小于1200')
            }
        }
    }

正确方法
当前页相同组件重复循环使用 都会触发宽度监听

    mounted() {
   		 window.addEventListener("resize", this.watchWindowSize);
    },
	methods:{
  		 watchWindowSize() {

            // 获取窗口的宽度和高度，不包括滚动条

            var w = document.documentElement.clientWidth;

            var h = document.documentElement.clientHeight;

            // 打印结果

	            console.log( "宽: " + w + ", " + "高: ")
	
	        },	
	}