Contenido del curso
Definición de rutas
API de navegación
Navegación avanzada
Despedida
Composition API
Luis Rodriguez
Estudiante
Daniel Theran
EstudianteContenido del curso
Composition API
Luis Rodriguez
EstudianteDaniel Theran
Estudiante
Ameth Ordoñez Erazo
Estudiante
Francisco Ruiz
Estudiante
Ivan Sebastian Mendoza Baca
Estudiante
Carlos Perilla
Estudiante
Julian David Alzate Cuervo
EstudianteCarlos Perilla
Estudiante
Carlos Rodríguez
EstudianteBueno 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
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:
Composition API:
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