Composition API
Contenido del curso
Composition API
Contenido del curso
Ameth Ordoñez Erazo
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
Quiero agregar algo aqui. Si se puede utilizar el watch de toda la vida. Segun la documentacion, el watcher recibe 3 parametros
Carlos Perilla
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
Options API:
Composition API:
Carlos Perilla
Carlos Rodríguez
Referencia: Vue Router and the 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>
