Question

使用下面的代码，如果单击添加，您可以在控制台中看到值发生更改，但视图未更新。

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);

...更改内容＆＃39;存储在this.dateValue中的Date对象，而不是对象（引用）本身。实质上，this.dateValue具有与以前相同的值，因此相应的机制不会检测到任何更改，也不会触发视图更新。现在与这个片段进行比较：

＆＃13;

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);
    }
  }
});

＆＃13;

<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>

＆＃13;

在每次调用addOne()时创建新的Date对象时，检测到更改，并更新相应的视图。

为什么你的第二个代码片段可能会起作用？同样，答案是关于变化检测。随着intValue值的更改，它足以触发整个组件的重新呈现（在此特定情况下为应用程序实例）。

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

Vue Js - 为什么在某些情况下对数据的更改不会更新视图

1 个答案: