Our project uses class based components. I have a getter to get the window innerWidth, but the value is only set once, it doesn't update if I change the window width.

get viewPortWidth() {
  
    if (process.client) {
          if (window.innerWidth !== undefined && window.innerHeight !== undefined) {
            return window.innerWidth;
          } else {
            return document.documentElement.clientWidth;
          }
        }
        return false; 
  }

If I write the value in the html: {{viewPortWidth}} it doesn't change. The value is the same also in vue devtools. Aren't getters supposed work like computed properties? How can I get to update seamlessly?

CodePudding user response：

vue computed properties are cached based on their reactive dependencies. window.innerWidth not a reactive dependency.

you can track changing window size event by adding an event listener in your "created" lifecycle hook like this:

created(){window.addEventListener('resize', (e)=>{console.log(e)})}