Vue响应式修改数据问题：定时器数值未在DevTools更新

嘿，我来帮你拆解这个问题：

首先直接给结论：你的timer属性其实是响应式的——页面输出能正常更新就已经证明了这一点。那为啥Vue开发者工具里没自动同步更新呢？这是因为你用了不必要的this.$set操作。

问题根源 #

this.$set的设计初衷是解决Vue无法检测的两种场景：

• 给对象新增未预先声明的属性
• 修改数组的索引位置元素（比如arr[0] = newVal）

而你的timer已经在data()里明确声明了，Vue早就把它转换成了响应式属性，此时完全不需要用this.$set来更新它。多余的$set调用虽然没破坏页面的响应性，但绕开了Vue常规的响应式更新流程，导致开发者工具没捕捉到数据变化。

修复方案 #

把setInterval里的代码改成直接赋值即可：

window.setInterval(() => {
  this.timer = this.timer - 1;
  // 或者更简洁的写法：this.timer -= 1;
}, 1000);

修改后你会发现：页面依然正常每秒递减，同时Vue开发者工具里的timer数值也会同步实时更新，完全符合预期。

内容的提问来源于stack exchange，提问作者user1012181