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跟踪依赖关系的变化并做出相应的反应：

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

Vue.js奇怪的数据更新

1 个答案: