记录一个vue监控屏幕宽度的问题

因为今天有查询过如何用vue监控屏幕宽度的问题，搜到的很多都是这样的写法：

 data() {
    return {
      screenWidth: null, //屏幕尺寸
    };
  },
  watch: {
    screenWidth: {
      handler: function (val) {
         console.log("屏幕宽度等于"+val+"px");
      },
      immediate: true,
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },

这个确实是可以监控到屏幕宽度，不过呢最终会导致一个问题，只能监控到1200px后就不能再继续往下监控了

就像这样，往上是可以，但是往下就不行了。而真正的解决方式是：

window.onresize = ()=>{var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;};

下面是修改过后的代码：

  data() {
    return {
      screenWidth: null, //屏幕尺寸
    };
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        console.log("屏幕宽度等于" + val + "px");
      },
      immediate: true,
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      this.screenWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    };
  },

测试：

这个问题就解决了。