vue种窗口缩放怎么处理数据？

问题描述：除了添加减少标签的时候，需要对标签隐藏及个数的处理；浏览器窗口缩放，有些标签会收起来隐藏，对应后面的个数需要更改；

其他场景亦可参考

第一步：也是重点需要在data函数种定义变量保存屏幕的尺寸：

第二步：在mouted种初始化窗口值

第三步：在watch中监听窗口并完成操作

最后一步：定时器要销毁哦

screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）

data () {
    return {
        timer：null,
        screenWidth: document.body.clientWidth   // 这里是给到了一个默认值 （这个很重要）
    }
},
mounted () {
window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      })()
    }
},
methods:{
...这是其他的增删标签的方法

},
beforeDestroy (){
    this.timer = null
},
watch: {
    //其他增删标签的时候也需要处理
    labelList: {
      handler () {
        this.$nextTick(() => {
          setTimeout(() => {
            let tags = this.$refs.tags
            if (Array.isArray(tags)) {
              let arr = []
              tags.forEach(item => {
                let dom = item.$el
                let height = dom.offsetTop
                if (height >= 40) arr.push(item)
              })
              this.hideLength = arr.length
            }
          }, 1500)
        })
      },
      deep: true,
      immediate: true
    },
    //这里是窗口缩放的时候的处理 本节所需
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        setTimeout( ()=>{
          let tags = this.$refs.tags
          if (Array.isArray(tags)) {
            let arr = []
            tags.forEach(item => {
              let dom = item.$el
              let height = dom.offsetTop
              if (height >= 40) arr.push(item)
            })
            this.hideLength = arr.length
          }  
          this.timer = null
        }, 400)
      }
    }
 }