vue学习之监听浏览器宽度

监听浏览器宽度（clientWidth）

vue组件中动态获取浏览器宽度，使用如下方式：

1. 在data中声明clientWidth变量：

data() {
  return {
    clientWidth: 0
  }
}

2. 初始化，可以在created中实现：

created() {
  this.windowWidth(document.documentElement.clientWidth)
}
methods: {
  windowWidth(value) {
     this.clientWidth= value
  }
},

3. 当组件挂载后，调用js的onresize方法：

mounted() {
  const _this = this;
  window.onresize = () => {
    return (() => {
      _this.clientWidth= `${document.documentElement.clientWidth}`
    })()
  }
}

4. 在watch中监听高度变化

// 这里优化了监听间隔，使用setTimeout，每500ms监听一次，这样操作避免了浏览器大小在持续变化时，连续监听带来的卡顿现象.
watch: {
  clientWidth(val) {
    if(!this.timer) {
      this.clientWidth= val
      this.timer = true
      let _this = this
      setTimeout(function () {
        _this.timer = false
      }, 500)
    }
    // 这里可以添加修改时的方法
    this.windowWidth(val);
  }
}