javascript - 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属性(property)， 通过将其与数字 5 相加来计算其值。
1 秒后我们尝试更新 this.minScore和this.minScore2使用相同的setTimeout()功能。

组件加载，模板要求计算属性 score和score2 。 两者都显示NaN一开始。 1秒过去后，this.minScore将其值正确更新为数字 15，但是 this.minScore 坚持上一个 NaN 结果。

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

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

附注我知道 JavaScript 的结果来自函数“undefined + number === NaN”

您可以在以下codepen上尝试一下 Link for Live Codepen

Answer 1

您无法将根级响应式(Reactive)属性添加到现有组件实例:Docs .

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

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

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

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

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

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