6

Con la implementación del composition API en vue 3, no tengo muy claro como se debe usar, ahora en el metodo setup(), absolutamente todo lo que se separaba antes en las capas de data, methods, computed, mounted, etc...

Por lo que entiendo la gran mayoria de estas si se pueden encapsular en setup, pero mi principal duda es con los methods, estos ya quedan completamente descartados y todo debe estar como funciones en setup?.

Que succede con los mixins, antes tenia varios mixins los cuales consultaban propiedades de mi plantilla con this. ahora esto no funciona por que lo que antes estaba en data al encontrarse en el setup no tengo acceso directo desde un mixin.

He leido la documentación oficial y guías, pero no estoy del todo claro como se debe manejar el nuevo setup que poner y que no poner allí dentro.

¿Como se debe trabajar exactamente el compisiton API en Vue 3?

Es buena practica mezclar la sintaxis de Vue 2 con la composition api?, por ejemplo

setup()
{

    const username = reactive(
    {
        show: true,
        value: '',
        name: 'username',
        type: 'text',
        label: 'auth.username',
        readonly: false,
        validations: 
        [
            { type: "required", status: false, msgError: 'validations.required' }
        ]
    });

    return { username }
}

Si tengo un atributo username declarado en mi setup, y necesito tener otro atributo al cual consultar desde un mixin, pero si no tengo acceso del el setup puedo declarar data()

data()
{
   return {
     attr: []   
   }
}

O no es buena practica mezclar ambas sintaxis?, no tengo del todo claro todo lo relacionado con lo nuevo de Vue 3. ¿Y cual es la mejor forma de trabajar ahora con los mixins?

1 respuesta 1

6
+25

Dependiendo de la versión de Vue que estés utilizando, puedes usar Options API o Composition API que introdujo Vue 3 y aunque Vue 3 es retro compatible con Vue 2 debes escoger entre utilizar una u otra. Composition API, en lugar de separar la información en opciones, utiliza el método (hook) setup(). Dicho hook devolverá un objeto con los elementos que queramos utilizar en el resto del componente.

En la fase de inicialización del componente (algo así como el constructor) que equivale a la antigua fase del ciclo de vida denominada created, deja de existir en Vue 3 y en su lugar, utilizaremos este hook, que tendrá dos parámetros opcionales: props y context.

props es un objeto con las props que hayan sido debidamente inicializadas y definidas en el componente y context es un objeto que contendrá el contexto del componente (attrs, emit, slots etc.).

Los hooks del ciclo de vida en lugar de ser métodos que se utilizan como opciones, son funciones que se importan desde el paquete vue. Casi todos conservan el mismo nombre que en Vue 2, pero se preceden con un on en formato camelCase (onBeforeMount, onMounted, onUpdated, onActivated) en el caso de beforeCreate y created se escribe directamente en setup(). Una vez importados, podemos utilizarlos en el setup(), pasándole por parámetro un callback que contendrá la lógica a ejecutar en esa fase del ciclo de vida.

En cuanto al uso de mixins, debo decirte que son considerados "dañinos". No existe una relación jerárquica entre un mixin y un componente que lo consume. Esto significa que un componente puede usar una propiedad de datos definida en el mixin. Pero un mixin también puede usar una propiedad de datos que asume que está definida en el componente. Este suele ser el caso cuando se usa un mixin para compartir la validación de entrada. El mixin podría esperar que un componente tenga un valor de entrada que usaría en su propio método de validación. Sin embargo, esto puede causar problemas. ¿Qué sucede si queremos refactorizar un componente más tarde y cambiar el nombre de una variable que necesita el mixin? No notaremos, mirando el componente, que algo anda mal. Un linter tampoco lo recogerá. Solo veremos el error en tiempo de ejecución. Ahora imagina un componente con un montón de mixins. Tendríamos que buscar manualmente el que estaría dando problemas. Esto no es un problema con Composition API porque necesitamos nombrar explícitamente cualquier estado o método devuelto y las colisiones de nombres se resolverán de la misma forma que para cualquier otra variable de JavaScript.

4
  • gracias por la info, tengo una duda: Si estás combinando Composition API con vue2, podria existir el mismo hook del ciclo de vida en cada API (por ejemplo usar updated(){} y a su vez onUpdated() dentro del setup() ). Existe alguna jerarquia a tener en cuenta? se recomienda usar alguno por sobre otro? Muchas gracias
    – Agustin G.
    Commented el 23 dic. 2021 a las 13:29
  • Gracias a ti @AgustinG. Según la docu de Vue los lifecycle hooks del tipo onX solo se pueden usar dentro de setup(), ya que se basan en el estado global interno para ubicar la instancia activa actual (la instancia del componente en el que setup() se está llamando en ese momento). Llamarlos sin una instancia activa resultaría en un error. Lo correcto es escoger uno de los dos y es importante saber no solo qué lifecycle hook usar, sino por qué lo estás usando.
    – Raymond
    Commented el 23 dic. 2021 a las 14:34
  • Creo que no formulé bien la pregunta. En Vue 3 puedo tener algo asi setup(){ onMounted(() => { console.log("soy el mounted del setup")}) ...} y a continuación mounted(){ console.log("Soy el mounted de vue 2")}. En este caso ambos se ejecutan, y sin importar el orden en que los coloque, el onMounted del setup se ejecuta primero. Queria saber si está bien combinar estos hooks (como poder se puede) y en el caso de que no, cual conviene usar.
    – Agustin G.
    Commented el 23 dic. 2021 a las 15:34
  • @Raymond y que succede con los methods?, queda como obsoleta esta sintaxis y todas las funciones que use mi componente deben ir en setup? Commented el 26 dic. 2021 a las 14:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.