解决方案：
方 案 一 :
1.第一步： 先在 data 中去 定义 一个记录宽度是 属性
data: {
screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
}
2.第二步： 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
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)
}
}
}
方 案 二:
在vue 2.x 里面的时候，可以在 mounted 钩子中 全局监听 resize 事件，然后绑定的函数再做具体的处理。
也是亲测有效，比之前的方法会好很多。
比如你设置了一个背景图和浏览器窗口相同高度,可以这么做 :
data(){
return {
clientHeight: '600px',
},
},
mounted() {
// 动态设置背景图的高度为浏览器可视区域高度
// 首先在Virtual DOM渲染数据时，设置下背景图的高度．
this.clientHeight.height = `${document.documentElement.clientHeight}px`;
// 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
const that = this;
window.onresize = function temp() {
that.clientHeight = `${document.documentElement.clientHeight}px`;
};
},
