更改数据变量时计算属性不会更新答案

【问题标题】：Computed property doesn't update upon changing data variable更改数据变量时计算属性不会更新
【发布时间】：2019-05-18 03:40:55
【问题描述】：

我有一个名为 monRaw 的数据变量，它是一个 Moment 对象，代表本周的第一天：

...
data() {
  return {
    monRaw: moment().startOf('isoWeek')
  }
},
...

然后我有一个名为 weekTitle 的计算属性，它与一些文本一起显示（它在我的项目中做得更多，但我在这里对其进行了简化）：

...
computed: {
  weekTitle: function() {
    alert('updating computed property...');
    return `Current week starting on ${this.monRaw.format('DD')}`;
  }
},
...

最后，名为viewNextWeek() 的方法将我的数据变量更改为下一周的第一天：

...
methods: {
  viewNextWeek: function() {
    this.monRaw = this.monRaw.add(1, 'weeks');
  },
...

在我的模板中，我显示了我的计算属性以及触发我的方法的按钮：

{{ weekTitle }}
<button @click="viewNextWeek">Next Week</button>

但由于某种原因，当我更改它所基于的数据变量时，我的计算属性没有得到更新。

它甚至没有尝试：我的alert() 仅在页面加载时触发，之后单击按钮时不再触发。

这里有什么问题？

【问题讨论】：

标签： vue.js computed-properties

【解决方案1】：

Moment.add 改变了矩变量，因此您只是将相同的对象分配回自身，这不会导致任何变化。

每the docs:

如果你想创建一个副本并对其进行操作，你应该使用在操纵时刻之前的时刻#clone。

new Vue({
  el: '#app',
  data: {
    monRaw: moment().startOf('isoWeek')
  },
  computed: {
    weekTitle: function() {
      alert('updating computed property...');
      return `Current week starting on ${this.monRaw.format('DD')}`;
    }
  },
  methods: {
    viewNextWeek: function() {
      const newValue = this.monRaw.clone().add(1, 'weeks');

      this.monRaw = newValue;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  {{ weekTitle }}
  <button @click="viewNextWeek">Next Week</button>
</div>

【讨论】：

我明白但不完全！表达式this.monRaw.add(1, 'weeks'); 改变了this.monRay 的值，对吧？然后我将这个新值分配给this.monRaw，我现在明白这是没用的（正如你所说，它正在为自己分配一个对象）。但仍然：this.monRaw 应该收到新值而不是旧值，不是吗？
它不会改变this.monRaw的值。它的值和以前一样是同一个对象（由它在内存中的地址标识）。它的 contents 发生了变化，但响应性不会检测到这样的内容变化。