在 vue 中使用反应性更改数据值答案

【问题标题】：Change data value with reactivity in vue在 vue 中使用反应性更改数据值
【发布时间】：2018-04-02 20:17:22
【问题描述】：

我正在尝试每 1 秒减少一次数据属性的值，如下所示：

  data() {
    return {
      timer: null
    }
  },

  mounted() {
    this.timer = 50;
    window.setInterval(() => {
      this.$set(this, 'timer', this.timer - 1)
    }, 1000);
  },

https://jsfiddle.net/eywraw8t/8179/

在 Vue devTool 中，timer 不会自动更新。但是，在 jsfiddle 中，输出正在更新。这是反应性的吗？如果没有，我怎样才能让它反应？

【问题讨论】：

按预期工作，有什么问题？
当我打开 vue devtool 时，timer 值没有更新。我想知道它是正常的还是失去了反应性。
如果失去响应性，你认为谁会更新 DOM？
Why doesn't the data get updated in Vue Dev Tools?的可能重复

标签： vue.js vuejs2

【解决方案1】：

正如@connexo 在评论部分已经提到的那样，timer 确实是被动的。这就是它在模板中更改其值的原因。

我能想到的唯一原因是您没有在您的环境中的组件模板中包含timer。有一个相关的Github issue 描述了到目前为止，如果没有受数据影响的 DOM 元素，vue-devtools 也不会更新。

【讨论】：