En aras de la explicación, hice un ejemplo de código en un archivo único .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> Usamos el componente anterior para mostrar el puntaje como una propiedad computed , calculando su valor resumiéndolo con el número 5.
Después de 1 segundo intentamos actualizar this.minScore y this.minScore2 usando la misma función setTimeout() .
El componente se carga, la plantilla solicita las propiedades calculadas score y score2 . Ambos muestran NaN al principio. Después de que pasa 1 segundo, this.minScore actualiza su valor correctamente al número 15, pero this.minScore se mantiene en el resultado anterior de NaN .
La única diferencia es que minScore se declara como undefined explícitamente y minScore2 no lo es. No hay ningún mensaje de error en la consola.
Mi pregunta es por qué en Vue necesita inicializar implícitamente una propiedad undefined , cuando en javaScript ambas propiedades se tratarían como undefined .
PD: sé que el resultado de javaScript de la función 'indefinido + número === NaN'
Puedes probarlo en el siguiente link de codepen para Live Codepen
No puede agregar propiedades reactivas de nivel raíz a una instancia de componente existente:Docs .
No obtiene ningún error, porque el código es válido (puede consola.log(this.minScore) y ver que la propiedad está configurada), pero las propiedades que agrega a this no son reactivas y la actualización de la plantilla no es motivado.
Si necesita no declarar las propiedades por adelantado, hay una solución. Primero, hágalos no root.
data(){ return { unitializedProperties: { // here will go new properties. } } }Luego use el método set() para agregar nuevos accesorios reactivos no root.
this.$set(this.unitializedProperties, 'minScore', 10)Puedes verlo en acción en tu codepen editado