Vuejs 不更新我的界面，有人知道为什么吗？

Question

我有一个带有 vuejs 的应用程序。我有一个每 10 秒从 API 更新的对象，它还必须在更新时更改 Html（界面）。

我在更新界面时遇到了一些困难，虽然我可以看到控制台中的对象发生了变化，因此我知道它正在发生变化。

这是我的一段代码：

watch: {
  myObj() {
    for (let [key, tuner] of Object.entries(myObj)) {
    ---- some code ----
     }
  }
 },
},
created() {
 setInterval(this.callMyApi(), 10000);
},

我每 10 秒调用一次我的 API，然后我使用 WATCH 属性检查 myObj 何时更改并使用它执行一些逻辑。谁能帮帮我？

Answer 1

这有 2 个组件对于确保观察对象（尤其是嵌套属性）正常工作非常重要。

首先，您必须 A) 通过声明 myObj: {} 将属性实例化为对象或 B) 使用 Vue.set(this, 'myObj', yourCustomObject) 以确保它是反应式的。

其次，如果您的对象包含嵌套对象/数组，则必须使用deep: true。

watch: {
  myObj: {
    deep: true, // this is the important part

    handler() {
      // your code
    }

  }
}