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

【问题标题】：Vue Computed property not updating - Strange behavior of undefined data propertyVue Computed 属性未更新 - 未定义数据属性的奇怪行为
【发布时间】：2021-12-26 22:21:07
【问题描述】：

为了便于解释，我在.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？

附：我知道 javaScript 的结果来自函数 `undefined + number === NaN'

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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

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

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

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

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

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

您可以在编辑后的codepen 中查看它的实际效果

【讨论】：