javascript - Vue 不会在 'indirectly' 更改表达式的值时更新 DOM

Question

长话短说

我正在尝试从 JSON 动态构建 UI。 JSON 表示具有应用程序状态(变量)和以这些变量为条件的 UI 构建逻辑的 vue.js 应用程序。

"type": "switch" 的 JSON 对象(参见下面链接的 fiddle )，指示 vue.js 应用程序显示多个 "case": {"case1 ": {..}, "case2": {..}} 取决于状态变量的值 "variable": "key"/*转换为 vueApp.key */.

更改其中一个变量 (update_status) 最初会导致 DOM 更新。遗憾的是，在安装应用程序后再次更改它不会影响 DOM。我很确定我正在做一些愚蠢的事情或遗漏了一些微妙的事情。

---

稍长的版本:

(如果你还在读这篇文章，please look at the fiddle 在这一点上。没有它，下面的任何内容都没有意义。谢谢!)

Vue.js 模板(使用 app.variables.update_status = "available")

<script type="text/x-template" id="template-switch">
  <div>
      <!-- Debug statements -->
      Switch cases: {{data.cases}}<br>
      Variables: {{$root.variables}}


      <div v-for="(value, key) in data.cases">
          <div v-bind:class="$root.variables[data.variable]"
               v-if="key == $root.variables[data.variable]">
              <all-components v-bind:data="value"></all-components>
          </div>
      </div>
  </div>
</script>

输入 JSON(绑定(bind)为上述模板中的 data):

{
    // Switch on value of app.variables.update_status
    "type": "switch",
    "variable": "update_status",   // Refers to app.variables.update_status
                                   // Used in <script id="template-switch">
    "cases": {
        // if app.variables.update_status == "checking" (Initial value)
        "checking": {
          "type": "paragraph",
          "text": "Checking for updates"
        },
        // if app.variables.update_status == "available" (Changed below)
        "available": {
            "type": "paragraph",
            "text": "Updates available."
        }
    }
}

我的问题:

假设 app 是 Vue.js 应用程序，我预计设置 app.variables.update_status = "available" 应该会导致 DOM 更改。但它并不像 TL;DR 部分中描述的那样。我希望了解原因。

我尝试过的:

• 让应用监视对象下的整个层次结构。
• 我最初认为这是因为 Vue 无法监控 key 可以更改的 object[key] 表达式。 But its definitely able to do it.
• 显示安装应用程序之前设置的最后一个值。安装应用程序后，对变量的任何更改都会保留但不会触发 DOM 更新。 (在 fiddle 中用“不起作用!”进行注释。)

试试吧!

这是 JS Fiddle (大幅缩小，并评论以便于理解 :))

尝试什么:

一旦 fiddle 运行，打开浏览器控制台并尝试执行以下语句:

• DEBUG.variables.update_status = "available";
• DEBUG.variables.update_status = "检查中";

Vue.js 版本:2.5.16

---

更新

此外，我刚刚发现如果我将数据对象传递为:

new Vue({.., data: { .. , variables: {update_status: "temp"}}})

——它有效!

这个我不太懂，主要是variables字段设置了deep watcher。我假设当它的字段更新时(例如 variables.update_status = "new-value";)，观察者最终会触发 DOM 更新。但出于某种原因，这并没有发生。

我真的希望我在做一些愚蠢的事情，这不是一个错误。

显示此行为的新 Fiddle 链接:https://jsfiddle.net/g0z3xcyk/

Answer 1

它不会在您的第一个 fiddle 中更新的原因是因为 Vue 不检测属性添加或删除，并且您在实例化 vue 时没有传递 update_status 属性，the docs explain it further .

在你的第二个 fiddle 中，你在实例化 vue 时设置 update_status，这就是为什么在这种情况下会检测到更改。

另一种选择，如文档中所述，是使用 Vue.set 或通过使用 Object.assign 再次分配它来完全重新创建对象