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

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 秒后，我们尝试使用相同的 setTimeout() 函数更新 this.minScore 和 this.minScore2。

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

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

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

P.S。我知道 javaScript 来自函数 `undefined + number === NaN'

的结果

你可以在下面的codepen上试试 Link for Live Codepen

Answer 1

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

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

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

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

然后使用 set() 方法添加新的非根反应道具。

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

您可以在编辑后的 codepen

中查看实际效果

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

Vue Computed property not updating - Strange behavior of undefined data property

javascript

vue.js

vuejs2

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

Vue Computed property not updating - Strange behavior of undefined data property

javascript

vue.js

vuejs2

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