VueJs 监听 window.resize 方法---窗口变化

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)
                }
            }
        }