Computed 属性不会在更改数据变量时更新

Question

我有一个名为 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() 仅在页面加载时触发，点击按钮后不再触发。

这是怎么回事？

Answer 1

Moment.add 改变了 moment 变量，所以你只是将同一个对象赋值给它自己，这不会导致任何变化。

根据 the docs:

If you want to create a copy and manipulate it, you should use moment#clone before manipulating the moment.

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>

Computed 属性不会在更改数据变量时更新

Computed property doesn't update upon changing data variable

vue.js

computed-properties

Computed 属性 不会在更改数据变量时更新

Computed property doesn't update upon changing data variable

vue.js

computed-properties

Computed 属性不会在更改数据变量时更新