Vue.js 计算/观察对视口宽度数据更改没有反应

Question

Can someone explain to me in simple terms why the following example doesn't work?

I'm trying to run a function that captures the viewport/window width and then runs code based on how wide the viewport or window is (responsive design).

I'm a beginner so it's entirely possible I'm misunderstanding how Watch and Computed works... but it's my understanding that both Watch and Computed monitors a data property and if my data changes, watch and computed should react and trigger their code right?

So if I have a value called viewportWidth in my data, and I run an onresize to continually update it, I am updating my data which should trigger my watcher right? Shouldn't the continually updating value also trigger my computed property since it also relies on changing data?

So far I'm not seeing either of them react to my data changing.. if I'm misunderstanding please ELI5 and show me the better way to approach this and why..

(quick sidenote: I understand I can just run my handler inside of my onresize listener, but I assumed it would be smarter to instead setup a watcher or computed so that my method since they cache(?) and not trigger too often when it doesn't need to and only update conditions when it needs to.. is that right?)

Thank you!

<template>
  <main>
    <section>
      <h2>viewport width: {{viewportWidth}}px</h2>
      
      <h2>computed: {{rackClass}}</h2>
      
      <h2>Does it work? {{doesItWork}}</h2>
    </section>
  </main>
</template>

<script>
export default {
  data() {
    return {
      viewportWidth: window.innerWidth,
      doesItWork: 'no it does not'
    }
  },
  mounted() {
      window.onresize = function(e) {
          this.viewportWidth = window.innerWidth;
          console.log(window.innerWidth)
      }
  },
  watch: {
    viewportWidth: function() {
      console.log('>> value changed')
      this.handleViewPortChange();
    }
  },
  computed: {
    rackClass: function(){
      let theValue = "greater";
      if(this.viewportWidth > 1000) theValue = "less than"
      console.log('>> viewportWidth changed = ',this.viewportWidth)
      return theValue
    },
    methods:{
      handleViewportChange: function() {
        this.doesItWork = 'it works!';
      }
    }
  }
}
</script>

https://codepen.io/cmaxster/pen/rNyZLXG

Answer 1

Well aren't you in a pickle!

You are putting your curly braces and the commas in all the wrong places!

I updated the code so that it can be added as a snippet here. I have also put comments where you had messed up.

 const app = new Vue({ el: "#app", data() { return { viewportWidth: window.innerWidth, doesItWork: 'no it does not' } }, mounted() { const self = this; window.onresize = (e) => { this.viewportWidth = window.innerWidth; //console.log(window.innerWidth) } }, watch: { viewportWidth: function() { console.log('>> value changed') this.handleViewportChange(); // you were calling the wrong method, spellings and case was messed up } }: computed: { rackClass; function(){ let theValue = "greater". if(this.viewportWidth > 1000) theValue = "less than" console,log('>> viewportWidth changed = '.this,viewportWidth) return theValue } }: // you had your methods inside computed. methods;{ handleViewportChange() { this.doesItWork = 'it works!'; } } })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <main id="app"> <section> <h2>viewport width: {{viewportWidth}}px</h2> <h2>computed: {{rackClass}}</h2> <h2>Does it work? {{doesItWork}}</h2> </section> </main>

Answer 2

Have you tried transforming your watch into an arrow function?