Composition API

Luis Rodriguez

Hace 4 años

Bueno yo todo el codigo lo he cambiado a Composition API desde el principio..

Daniel Theran

Hace 4 años

ahora nos toca cambiarlo a options api 😂

Ameth Ordoñez Erazo

Hace 4 años

OJO 👀 Al usar el watch en composition API, no se ejecutará la primera vez que se carga el componente. Para que se ejecute a penas se carga el componente y tambien cada vez que cambie el parámetro, se debe usar watchEffect(). Miren el comentario que les deje en la clase anterior para más detalles...

Francisco Ruiz

Hace 4 años

Quiero agregar algo aqui. Si se puede utilizar el watch de toda la vida. Segun la documentacion, el watcher recibe 3 parametros

La variable que va a observar
la funcion callback que ejecutara
Un objeto de configuracion. Dentro de este objeto de config, se puede agregar la propiedad "inmediate". Al ponerla en true, se ejecuta el codigo en el primer render

Ivan Sebastian Mendoza Baca

Hace 4 años

Me preguntaba si se iba a usar el composition API en algún momento del curso. Excelente!!!

Carlos Perilla

Hace 4 años

Usar watchEffect puede ser un error. Porque esta función observa multiples funciones y solo nos interesa la variable reactiva 'route.params'.

Un articulo para saber más al respecto: https://escuelavue.es/tips/vue-3-watch-vs-watcheffect/

PD: watchEffect en la clase no se usa, es una función interesante, pero estoy desacuerdo con su uso como dicen en otros comentarios. Por eso este comentario.

Julian David Alzate Cuervo

Hace 3 años

Options API:

Es la forma tradicional de escribir componentes en Vue.
Define datos, métodos y ganchos del ciclo de vida por separado.
Es más fácil de entender para principiantes.

Composition API:

Es un enfoque más moderno y funcional.
Agrupa la lógica relacionada en funciones, lo que facilita la reutilización.
Mejora la organización y escalabilidad de los componentes.

Carlos Perilla

Hace 4 años

Mi código en Composition API con comentarios para ChatView.vue

<!-- En Composition API -->
<script setup>
    import { reactive, computed } from 'vue';

    // Recordamos defineProps y defineEmits vienen importadas por defecto,
    // en Composition API.
    const props = defineProps({
    chatId: {
            type: String,
            default: '',
        },
    })

    // Al ser un valor complejo usamos reactive en lugar de ref.
    // https://escuelavue.es/tips/ref-vs-reactive-vue-3/
    const messages = reactive([])
    // Llenamos el array reactivo.
    messages.value = [
                        { id: 1, text: 'Mensaje 1', author: 1 },
                        { id: 2, text: 'Mensaje 2', author: 2 },
                        { id: 3, text: 'Mensaje 3', author: 3 },
                    ]

    // Creamos la función computada por medio de la función
    // 'computed'.
    // Accedemos a 'chatId' de forma explicita a traves de props.
    // Notar que en Options API, se da de forma implicita, al
    // declarar chatId en los props, se accedía por medio de 'this'.
    const messagesFiltered = computed(
        () => messages.value.filter((msg) => `${msg.author}` === props.chatId)
    )
</script>

Carlos Rodríguez

Hace 4 años

Referencia: Vue Router and the Composition API

Bueno yo todo el codigo lo he cambiado a Composition API desde el principio..

ahora nos toca cambiarlo a options api 😂

OJO 👀 Al usar el watch en composition API, no se ejecutará la primera vez que se carga el componente. Para que se ejecute a penas se carga el componente y tambien cada vez que cambie el parámetro, se debe usar watchEffect(). Miren el comentario que les deje en la clase anterior para más detalles...

Quiero agregar algo aqui. Si se puede utilizar el watch de toda la vida. Segun la documentacion, el watcher recibe 3 parametros

La variable que va a observar
la funcion callback que ejecutara
Un objeto de configuracion. Dentro de este objeto de config, se puede agregar la propiedad "inmediate". Al ponerla en true, se ejecuta el codigo en el primer render

Me preguntaba si se iba a usar el composition API en algún momento del curso. Excelente!!!

Usar watchEffect puede ser un error. Porque esta función observa multiples funciones y solo nos interesa la variable reactiva 'route.params'.

Un articulo para saber más al respecto: https://escuelavue.es/tips/vue-3-watch-vs-watcheffect/

PD: watchEffect en la clase no se usa, es una función interesante, pero estoy desacuerdo con su uso como dicen en otros comentarios. Por eso este comentario.

Options API:

Es la forma tradicional de escribir componentes en Vue.
Define datos, métodos y ganchos del ciclo de vida por separado.
Es más fácil de entender para principiantes.

Composition API:

Es un enfoque más moderno y funcional.
Agrupa la lógica relacionada en funciones, lo que facilita la reutilización.
Mejora la organización y escalabilidad de los componentes.

Mi código en Composition API con comentarios para ChatView.vue

<!-- En Composition API -->
<script setup>
    import { reactive, computed } from 'vue';

    // Recordamos defineProps y defineEmits vienen importadas por defecto,
    // en Composition API.
    const props = defineProps({
    chatId: {
            type: String,
            default: '',
        },
    })

    // Al ser un valor complejo usamos reactive en lugar de ref.
    // https://escuelavue.es/tips/ref-vs-reactive-vue-3/
    const messages = reactive([])
    // Llenamos el array reactivo.
    messages.value = [
                        { id: 1, text: 'Mensaje 1', author: 1 },
                        { id: 2, text: 'Mensaje 2', author: 2 },
                        { id: 3, text: 'Mensaje 3', author: 3 },
                    ]

    // Creamos la función computada por medio de la función
    // 'computed'.
    // Accedemos a 'chatId' de forma explicita a traves de props.
    // Notar que en Options API, se da de forma implicita, al
    // declarar chatId en los props, se accedía por medio de 'this'.
    const messagesFiltered = computed(
        () => messages.value.filter((msg) => `${msg.author}` === props.chatId)
    )
</script>

Referencia: Vue Router and the Composition API

Introducción

Introducción a Vue Router

Setup inicial

Definición de rutas

Definición de rutas

Parámetros

Rutas anidadas

API de navegación

Navegación programática

Rutas con nombre

Redirección y alias

Componentes y props

Modos de historia

Navegación avanzada

Guardas de navegación

Rutas con metadatos

Obtención de datos

Composition API

Coincidencia de rutas

Rutas dinámicas

Despedida

Despedida del curso

Composition API

Progreso del curso

Introducción

Definición de rutas

API de navegación

Navegación avanzada

Despedida

Recursos

Recursos