javascript - Vue.js 奇怪的数据更新

Question

我是 Vue.js 初学者，我注意到数据更新中的奇怪行为。

如果我执行这段代码，它会正常工作。数据每秒呈现一次:

var timerVue = new Vue({
    el: "#timer",
    data: {
        object: new Date(0),
        integer: 0 
    },
});

var hours = 0;
setInterval( function(){
    timerVue.object.setHours( hours++ );
    timerVue.integer++;
}, 1000 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="timer">
  <div>{{ object }}</div>
  <div>{{ integer }}</div>
</div>

但如果我删除对象，数据不会更新。

var timerVue = new Vue({
    el: "#timer",
    data: {
        object: new Date(0),
    },
});

var hours = 0;
setInterval( function(){
    timerVue.object.setHours( hours++ );
}, 1000 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="timer">
  <div>{{ object }}</div>
</div>

数据需要这样设置吗？: variable = "value" 触发观察者？

谢谢

Answer 1

一种可能性是使用 computed 属性:vue 跟踪依赖项更改并相应地使用react:

<script>
    var timerVue = new Vue({
        el: '#timer',
        data: {
            object: new Date(0),
            hours: 0
        },
        computed: {
            plain_date: function () {
                this.hours;  // just for creating a dependency
                return this.object;
            }
        }
    })


    setInterval(function () {
        timerVue.object.setHours(timerVue.hours++);
    }, 1000);

</script>

html:

<div id="timer">
  <div>{{ plain_date }}</div>
</div>