Vue.js Computed/Watch 对视口宽度数据更改没有反应答案

【问题标题】：Vue.js Computed/Watch Not Reacting to Viewport Width Data ChangeVue.js Computed/Watch 对视口宽度数据更改没有反应
【发布时间】：2021-06-10 02:45:17
【问题描述】：

有人可以简单地向我解释一下为什么下面的例子不起作用吗？

我正在尝试运行一个函数来捕获视口/窗口宽度，然后根据视口或窗口的宽度运行代码（响应式设计）。

我是初学者，所以我完全有可能误解了 Watch 和 Computed 的工作原理......但我的理解是 Watch 和 Computed 都监控数据属性，如果我的数据发生变化，watch 和 computed 应该做出反应并触发他们的代码对吗？

因此，如果我的数据中有一个名为 viewportWidth 的值，并且我运行 onresize 以不断更新它，我正在更新我的数据，这应该会触发我的观察者，对吧？不应该不断更新的值也触发我的计算属性，因为它还依赖于更改数据？

到目前为止，我没有看到他们中的任何一个对我的数据变化做出反应。如果我有误解，请 ELI5 告诉我解决这个问题的更好方法以及原因。

（快速旁注：我知道我可以在我的 onresize 侦听器中运行我的处理程序，但我认为设置一个观察器或计算它会更聪明，以便我的方法因为它们缓存（？）而不是经常触发当它不需要并且只在它需要的时候更新条件..对吗？）

谢谢！

<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

【问题讨论】：

标签： javascript vue.js vuejs2 frontend

【解决方案1】：

你不是在泡菜吗！

你把花括号和逗号都放错了地方！

我更新了代码，以便可以在此处将其添加为 sn-p。我还把 cmets 放在了你搞砸的地方。

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>

【讨论】：

【解决方案2】：

您是否尝试过将手表变成箭头功能？

【讨论】：