Windows 旧宽度在第一次调整大小时未定义，但从第二次调整大小时其工作正常，Vue jS

Question

I am doing something on window resize in VUE, and wrote a function which will give me the window width after resize and just before resize, Ie old window size and new window size,

So when I am resizing the window, on very first resize its giving the old value undefined, and from 2nd resize everything is working fine, What's wrong with it that on first instance windows old value is undefined. while I am calculating it on load (mounted) as well.

Here is the working demo

TO check the issue: resize the result window and check console , on first resize it will give old value undefined, but when you resize it again, it will work fine.

methods: {
    getWindowWidth(){
          var winWidth = window.innerWidth;
          var newWinWidth = window.innerWidth;
          console.log("initial width " + winWidth);
          var doIt;
    },
    handleResize() {
      const _this = this
      //_this.mounted();
      clearTimeout(_this.getWindowWidth.doIt);
      _this.getWindowWidth.doIt = setTimeout(function() {
        _this.getWindowWidth.winWidth = _this.getWindowWidth.newWinWidth;
        _this.getWindowWidth.newWinWidth = window.innerWidth;
        console.log("new " + _this.getWindowWidth.newWinWidth);
        console.log("old " + _this.getWindowWidth.winWidth);
        //console.log("old "+ _this.winWidth);
            if(_this.getWindowWidth.newWinWidth > 1025 && _this.getWindowWidth.winWidth < 1025){
              console.log("refresh now");
              //window.location.reload();
            }
            if(_this.getWindowWidth.newWinWidth < 1025 && _this.getWindowWidth.winWidth > 1025){
              console.log("refresh again");
              //window.location.reload();
            }
        }, 1000);
      }
    },
    mounted: function() {
    const _this = this
    window.addEventListener('resize', _this.handleResize);
    }

Answer 1

getWindowWidth is a method/function but you are using it like it's an object, that will wok because functions in javascript are objects but the intended behavior is not what you think it is. When you first do getWindowWidth.winWidth that won't get the variable winWidth inside getWindowWidth , that will try to read the value of the property winWidth of the object getWindowWidth which is initially undefined . It will obly have a value after the first time you set it, that explains why your code doesn't work the first time, because the first time is used to initialize those properties.

What you need to do is get rid of getWindowWidth altogether and in the mounted hook just create a regular object that holds the initial values and use that in handleResize like so:

methods: {
  handleResize() {
    clearTimeout(this.windowValues.doIt);
    this.windowValues.doIt = setTimeout(() => {         // use an arrow function here so you can refer to the same 'this' inside setTimeout and get rid of the variable '_this'
      this.windowValues.winWidth = this.windowValues.newWinWidth;
      this.windowValues.newWinWidth = window.innerWidth;
      console.log("new " + this.windowValues.newWinWidth);
      console.log("old " + this.windowValues.winWidth);
      
      if(this.windowValues.newWinWidth > 1025 && this.windowValues.winWidth < 1025) {
        console.log("refresh now");
        //window.location.reload();
      }
      if(this.windowValues.newWinWidth < 1025 && this.windowValues.winWidth > 1025) {
        console.log("refresh again");
        //window.location.reload();
      }
    }, 1000);
  }
},
mounted: function() {
  this.windowValues = {                                 // define the object 'windowValues', this object will be used in 'handleResize'
    winWidth: window.innerWidth,
    newWinWidth: window.innerWidth
    // doIt will get assigned later so no need to define it here
  };

  window.addEventListener('resize', this.handleResize);
}

Here is a working demo: https://jsfiddle.net/admqLurv/