Composition API
Clase 14 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Luis Rodriguez
student•
hace 4 años
Daniel Theran
student•
hace 3 años
Clase 14 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Luis Rodriguez
Daniel Theran
Ameth Ordoñez Erazo
Francisco Ruiz
Ivan Sebastian Mendoza Baca
Carlos Perilla
Julian David Alzate Cuervo
Carlos Perilla
Carlos Rodríguez
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
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