Introducción
¿Qué aprenderás en este curso?
Introducción a Vue CLI
Estructura del proyecto
Built-in Components
Componentes dinámicos
Componentes asíncronos
Transiciones
Teleports
Componentes personalizados
Virtual DOM
Entendiendo el ciclo de vida de los componentes
Explorando los primeros hooks del ciclo de vida de Vue
Mixins
Composition API
Introducción a Composition API
Ciclo de vida en Composition API
Variables reactivas con ref y reactive
Watch
Computed
Uso de props
Uso de context
Provide / Inject
Template refs
Composition vs. Options
Script setup
Cierre del curso
Hora de poner tu conocimiento en práctica
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Los "watchers" en Vue.js son un aspecto esencial para gestionar cambios en las aplicaciones, permitiéndote escuchar los cambios en un estado reactivo y reaccionar ante ellos. Con el Composition API, el uso de watchers adopta un enfoque diferente al que podrías estar acostumbrado con el Options API. Ahora, veremos cómo implementarlos y aprovechar al máximo sus capacidades en el entorno del Composition API.
Los watchers son funciones observadoras que se activan cuando cambia una variable reactiva, dándote acceso al valor antiguo y al nuevo para ejecutar acciones en consecuencia. Se asemejan a las propiedades computadas, pero en lugar de calcular valores, monitorean los cambios.
Para implementar un watcher en el Composition API, se sigue el siguiente procedimiento:
Importar la función watch: Asegúrate de importar watch de Vue, ya que será necesaria para definir los listeners.
import { watch } from 'vue';
Usar la función setup: Dentro de setup, defines tus datos reactivos y posteriormente los observers.
setup() {
const counter = ref(0);
const object = reactive({ counter: 0 });
// Ejemplo de uso con reactive
watch(
() => object.counter,
(newValue, oldValue) => {
console.log('Nuevo valor:', newValue, 'Valor anterior:', oldValue);
}
);
}
Definir los parámetros del watcher:
ref y reactive?La diferencia principal al usar ref y reactive en el contexto de watchers radica en cómo accedemos a los valores.
Con ref: Debes acceder al valor encapsulado usando .value.
const counter = ref(0);
watch(
() => counter.value,
(newVal, oldVal) => {
// Manejo de cambios
}
);
Con reactive: Accedes al valor directamente porque reactive retorna una referencia al objeto original en forma de proxy.
const object = reactive({ counter: 0 });
watch(
() => object.counter,
(newVal, oldVal) => {
// Manejo de cambios
}
);
Implementar watchers con el Composition API difiere ligeramente a como se haría en el Options API. Aquí destaca:
La programación funcional: Utilizar watch en el Composition API implica una sintaxis funcional que genera una mejor gestión de la reactividad, accediendo a los valores de manera adecuada.
Flexibilidad del callback: Dentro de la función callback, puedes integrar cualquier lógica en JavaScript vanilla o características específicas de Vue.js, logrando así un espectro completo de reacciones en tiempo real.
Ventajas de la sintaxis moderna: La sintaxis basada en funciones permite mayor claridad y separación lógica dentro del componente, siendo más escalable en aplicaciones grandes.
El Composition API y su manejo de watchers te brinda un enfoque más sistemático y flexible para escuchar cambios y actuar sobre ellos en tu aplicación Vue.js. Continúa experimentando y profundizando en estas herramientas para mejorar tus habilidades en el desarrollo moderno de interfaces.
Aportes 8
Preguntas 2
Código de la clase:
<template>
<h1>{{ text }}</h1>
<h2>{{ counter }}</h2>
</template>
<script>
import { ref, watch } from "vue"
export default {
setup() {
const text = ref('Hello World')
const counter = ref(0)
text.value = 'Hello Vue!'
setInterval(() => {
counter.value++
}, 1500)
watch(counter, (newValue, oldValue) => {
console.log(`old: ${oldValue} - new: ${newValue}`)
})
return {
text,
counter,
}
}
}
</script>
Resume de composition Api: lo mismo que option Api pero mas dificil 😅, ojala no se vuelva el estandar.
Watch recibe dos params: el valor que quiero escuchar, la function que va a ejecutar cada vez que haya un cambio.
La function a su vez, recibirá dos argumentos: el valor nuevo y el valor anterior
watch(obj, (valor_nuevo, valor_anterior ) => {
console.log();
}
Me estoy enamorando de Vue! La profe es excelente!
seria bueno que la profe dejara la documentacion de vue que utiliza en las clases, para profundizar mas en algunos temas.
Mucho ojo con el uso de ref y reactive jajajjaa créanme cuando les digo que eso da una mano de dolores de cabeza cuando te estás acostumbrando, porque el tema del .value o que no tome el valor de la variable es una joda.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?