Vue, por qué los datos deben ser una función

Al usar Vue, seguramente se preguntará '¿por qué los datos deben ser una función que devuelve un objeto y no solo un objeto?'

Al usar Vue seguramente se preguntará "¿por qué debedataser una función que devuelve un objeto, y no solo un objeto? "

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>

<script> export default { data: function() { return { counter: 0 } } } </script>

Especialmente considerando que en algunos lugares,dataesnouna función, como probablemente verá en el componente Aplicación en varios ejemplos.

La explicación es que cuando el componente se usa varias veces, si no es una función, sino un objeto regular, así:

data: {
  counter: 0
}

luego, debido a cómo funciona JavaScript,cada instancia del componente compartirá esta propiedad.

Esto no es lo que desea en el 99,9% de los casos, y en su lugar debe hacer:

data: function() {
  return {
    counter: 0
  }
}

Puede que al principio no sea intuitivo, pero una vez que acepte esta explicación y aprenda que es un poco dañino para su aplicación y una posible fuente de errores, recordará siempre usar una función para los datos.

Descarga mi gratisManual de Vue


Más tutoriales de vue: