vue.js - Vue Js - 为什么在某些情况下对数据的更改不会更新 View

Question

使用下面的代码，如果您单击添加，您可以在控制台中看到值发生变化，但 View 没有更新。

new Vue({
  el: '#app',
  data: {
    dateValue: new Date(2017,0,1),    
  },
  methods: {
    addOne: function () {    	
      this.dateValue.setDate(this.dateValue.getDate() + 1);    
      console.log('new date',this.dateValue);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
    Date Value : {{ dateValue }}<br />
    
    <button v-on:click="addOne">Add One</button> <br />
</div>

如果我引入简单的整数值并将其显示在日期旁边，它会正常工作并且也会导致日期值正确更新。

new Vue({
  el: '#app',
  data: {
    dateValue: new Date(2017,0,1), 
    intValue: 0
  },
  methods: {
    addOne: function () {    	
      this.dateValue.setDate(this.dateValue.getDate() + 1);  
      this.intValue++;
      
      console.log('new date',this.dateValue);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
    Date Value : {{ dateValue }}   Int Value : {{ intValue }}<br />
    
    <button v-on:click="addOne">Add One</button> <br />
</div>

我对以各种方式设置日期大惊小怪，但我只是不明白这里发生了什么。以某种方式未检测到日期的突变。我希望有人能阐明这一点。

Answer 1

这一行...

this.dateValue.setDate(this.dateValue.getDate() + 1);

... 更改存储在 this.dateValue 中的 Date 对象的“内容”，但不更改对象(引用)本身。本质上，this.dateValue 与之前的值相同，所以相应的机制没有检测到变化，也没有触发 View 更新。现在与这个片段进行比较:

new Vue({
  el: '#app',
  data: {
    dateValue: new Date(2017,0,1),    
  },
  methods: {
    addOne: function () {    	
      this.dateValue = new Date(
        this.dateValue.setDate(this.dateValue.getDate() + 1)
      );
      console.log('new date',this.dateValue);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
    Date Value : {{ dateValue }}<br />
    
    <button v-on:click="addOne">Add One</button> <br />
</div>

每次调用 addOne() 都会创建新的 Date 对象， 会检测到更改，并更新相应的 View 。

---

您可能会问，为什么您的第二个代码段有效？同样，答案与变化检测有关。当 intValue 值发生变化时，足以触发整个组件(应用程序实例，在这种特殊情况下)的重新渲染。

是的，在为更改的状态构建新的虚拟 DOM 时，VueJS 检索所有属性的值 - 而不仅仅是更改的属性。这是将应用于真实 DOM 的新旧 V-DOM 之间的区别。