Tipod de Datos en Vue 3

En Vue 3, los datos del componente se pueden definir como un objeto JavaScript. Este objeto puede contener cualquier tipo de datos primitivos, como cadenas, números, booleanos y null. También puede contener objetos complejos, como arrays, funciones y objetos personalizados.

Los tipos de datos primitivos se pueden definir directamente en la sección data del componente. Por ejemplo:

Fragmento de código

export default {
  data() {
    return {
      nombre: "Juan",
      edad: 30,
      casado: false,
    };
  },
};

Los objetos complejos se pueden definir utilizando la función reactive(). Esta función crea un proxy que rastrea los cambios en el objeto original. Por ejemplo:

Fragmento de código

export default {
  data() {
    return {
      personas: reactive([
        { nombre: "Juan", edad: 30 },
        { nombre: "María", edad: 25 },
      ]),
    };
  },
};

En este ejemplo, el componente tiene una propiedad llamada personas que almacena un array de objetos. El array se define utilizando la función reactive() para que Vue pueda detectar los cambios en el array.

Los objetos personalizados se pueden definir utilizando la función defineComponent(). Esta función crea un componente personalizado que se puede utilizar como objeto de datos. Por ejemplo:

Fragmento de código

export default {
  data() {
    return {
      persona: defineComponent({
        props: {
          nombre: String,
          edad: Number,
        },
      }),
    };
  },
};

En este ejemplo, el componente tiene una propiedad llamada persona que almacena un objeto personalizado. El objeto personalizado se define utilizando la función defineComponent().

Los tipos de datos que se pueden usar en la sección data de un componente Vue 3 son los siguientes:

• Tipos primitivos: string, number, boolean, null
• Objetos complejos: array, function, object
• Objetos personalizados: defineComponent()

Además, los datos del componente también pueden ser una referencia a un objeto externo. Por ejemplo:

Fragmento de código

import { Persona } from './Persona';

export default {
  data() {
    return {
      persona: new Persona({ nombre: "Juan", edad: 30 }),
    };
  },
};

En este ejemplo, el componente tiene una propiedad llamada persona que almacena una referencia a un objeto de la clase Persona. La clase Persona se importa del archivo Persona.vue.