Composition API

Clase 14 de 17 • Curso de Vue.js: Navegación con Vue Router

Clase anteriorSiguiente clase

Luis Rodriguez

student•

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

Daniel Theran

student•

ahora nos toca cambiarlo a options api 😂

Ameth Ordoñez Erazo

student•

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

student•

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

student•

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

Carlos Perilla

student•

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

student•

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

student•

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

student•

Referencia: Vue Router and the Composition API

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