Vue 计算属性未更新 - 未定义数据属性的奇怪行为

Question

为了便于解释，我在.vue单个文件中做了一个代码示例

<template>
  <div id="app">
    <h1>{{score}} : Score with undefined minScore but declared on data</h1>
    <h1>{{score2}} : Score with undeclared/undefined minScore2</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minScore: undefined,  
      // Uncomment minScore2 to fix weird behavior
      // minScore2: undefined
    }
  },
  computed: {
    score() {
      return this.minScore + 5
    },
     score2() {
       return this.minScore2 + 5
    }
  },
  created() {
   setTimeout(() => { 
     this.minScore = 10
     this.minScore2 = 10
}, 1000)
  }
};
</script>

我们使用上面的组件将分数显示为computed属性，通过将其与数字 5 相加来计算其值
。1 秒后，我们尝试更新this.minScore并this.minScore2使用相同的setTimeout()函数。

组件加载，模板要求计算属性score和score2. 两者都显示NaN在开头。1 秒过去后，this.minScore将其值正确更新为数字 15，但this.minScore 保留之前的NaN结果。

唯一的区别是显式minScore声明undefined和minScore2不显式声明。控制台中没有任何错误消息。

我的问题是为什么在 Vue 中你需要隐式初始化一个undefined属性，而在 javaScript 中这两个属性都会被视为undefined？

PS我知道javaScript的结果来自函数“undefined + number === NaN”

您可以在以下 Codepen Live Codepen 链接上尝试

Answer 1

您无法将根级反应式属性添加到现有组件实例：Docs。

您不会收到任何错误，因为代码有效（您可以 console.log(this.minScore) 并查看该属性已设置），但您添加的属性this不是反应性的，并且不会触发模板更新。

如果您不需要预先声明属性，有一个解决方案。首先，使它们成为非root。

data(){
  return {
    unitializedProperties: {
      // here will go new properties. 
    }
  }
}

然后使用 set() 方法添加新的非根响应式 props。

 this.$set(this.unitializedProperties, 'minScore', 10)

您可以在编辑过的codepen中查看它的实际运行情况