Introducción
La Composition API en Vue 3 es una característica diseñada para superar las limitaciones de la Options API. Es particularmente útil en aplicaciones grandes y complejas, ya que permite la separación de las preocupaciones lógicas y la reutilización de la lógica.
Ref, Reactive, toRefs
Estos son partes importantes de la Composition API.
Ref
Ref se utiliza para crear variables reactivas y mutables para tipos de datos primitivos. Aquí hay un ejemplo:
<script setup>
import { ref } from 'vue'
const tarea = ref('La tarea está vacía')
console.log(tarea.value) // La tarea está vacía
tarea.value = 'Quiero terminar el curso de Vue'
console.log(tarea.value) // Quiero terminar el curso de Vue
</script>Para acceder a Ref en la plantilla HTML es:
<input v-model="tarea" placeholder="Añade algo..." type="text" name="tarea"/>
{{ tarea }}Reactive
A diferencia de Ref, que solo puede ser utilizado para datos primitivos, Reactive puede ser utilizado para objetos. Aquí hay un ejemplo:
<script setup>
import { reactive } from 'vue'
const tareas = reactive({
actividad: "Quiero terminar el curso de Vue",
estaHecho: false
})
setTimeout(() => {
tareas.actividad = "Quiero terminar el curso de Reactjs"
tareas.estaHecho = false
}, 2000)
</script>Para acceder a Reactive en la plantilla HTML es:
{{ tareas.actividad }} - {{ tareas.estaHecho }}toRefs
toRefs se utiliza para convertir un objeto Reactive en un objeto plano. Aquí hay un ejemplo:
<script setup>
import { reactive, toRefs } from 'vue'
const tareas = reactive({
actividad: "Quiero terminar el curso de Vue",
estaHecho: false
})
setTimeout(() => {
tareas.actividad = "Quiero terminar el curso de Reactjs"
tareas.estaHecho = false
}, 2000)
const tareasRefs = toRefs(tareas)
</script>Métodos, Computed Getter & Setter
En la Composition API, los métodos se definen de manera diferente que en la Options API. Las propiedades calculadas pueden ser definidas con getters y setters.
Métodos
Aquí hay un ejemplo de cómo definir un método:
<script setup>
import { ref } from 'vue'
const contador = ref(0)
const incrementar = () => {
contador.value++
}
</script>Computed Getter & Setter
Las propiedades computadas son una característica de Vue.js que permite definir una propiedad que se calcula a partir de otras propiedades de datos. Son especialmente útiles cuando tienes datos que necesitan ser calculados de manera dinámica y reactiva en función de los cambios en otros datos.
En la Composition API, puedes definir una propiedad computada utilizando la función computed. Esta función toma un objeto con dos métodos: get y set. El método get se utiliza para calcular y devolver el valor de la propiedad computada, mientras que el método set se utiliza para actualizar el valor de la propiedad computada.
Aquí tienes un ejemplo de cómo se puede utilizar una propiedad computada en la Composition API:
<script setup>
import { ref, computed } from 'vue'
const contador = ref(1)
const resultado = computed({
get: () => contador.value * 2, // calcula el doble del valor del contador
set: valor => {
contador.value = valor / 2 // actualiza el valor del contador cuando se cambia el resultado
}
})
</script>En este ejemplo, resultado es una propiedad computada que siempre será el doble del valor de contador. Cuando cambias el valor de resultado, el valor de contador se actualiza automáticamente para ser la mitad del nuevo valor de resultado.
Las propiedades computadas son reactivas, lo que significa que se recalculan automáticamente cuando cambian las dependencias. En este caso, cada vez que cambia el valor de contador, se recalcula automáticamente el valor de resultado.
Si no quieres usar computed getter & setter, aquí tienes un ejemplo:
<script setup>
import { ref, computed } from 'vue'
const contador = ref(1)
const resultado = computed(() => {
return contador.value + 10
})
resultado.value = 0
console.log("contador", contador.value) // 1
console.log("resultado", resultado.value) // 11
</script>Watch & WatchEffect
Watch y WatchEffect se utilizan para monitorear cambios en el estado. Watch también puede obtener el valor antiguo o el valor anterior.
Watch
Aquí hay un ejemplo de uso de watch:
<script setup>
import { watch, ref } from 'vue'
const tarea = ref('La tarea está vacía')
watch(tarea, (nuevoValor, valorPrevio) => {
console.log("tarea", tarea.value)
console.log("prev", valorPrevio)
})
</script>Para monitorear cambios de estado en más de uno, el ejemplo es:
<script setup>
import { watch, ref, reactive } from 'vue'
const tarea = ref('La tarea está vacía')
const tareas = reactive({
actividad: "Quiero terminar el curso de Vue",
estaHecho: false
})
watch([tarea, tareas], (nuevoValor, valorPrevio) => {
console.log("tarea", tarea.value)
console.log("tareas", tareas)
console.log("nuevo valor", nuevoValor)
console.log("valor previo", valorPrevio)
})
</script>WatchEffect
WatchEffect tiene la misma función, es decir, monitorear los cambios de estado. La diferencia es que WatchEffect es adecuado para monitorear más de un estado. Aquí hay un ejemplo de uso de watchEffect:
<script setup>
import { watchEffect, ref, reactive } from 'vue'
const tarea = ref('La tarea está vacía')
const tareas = reactive({
actividad: "Quiero terminar el curso de Vue",
estaHecho: false
})
watchEffect(() => {
console.log("tarea", tarea.value)
console.log("lista de tareas", tareas.lista)
})
</script>Hooks de Ciclo de Vida
El ciclo de vida en la Composition API es similar a la Options API. Incluye hooks como onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, y onErrorCaptured.
Aquí hay un ejemplo de cómo usarlos:
<script setup>
import { onMounted, ref } from 'vue'
const valor = ref('hola mundo')
onMounted(() => {
console.log('El valor de valor es: ' + valor.value)
})
</script>Componente (Props & Emit)
Props y emit se utilizan para pasar datos entre componentes. Props se utilizan para enviar datos desde el componente padre al componente hijo. Mientras que emit se utiliza como un evento de disparo para pasar datos desde el componente hijo al componente padre.
Aquí hay un ejemplo de cómo usar access props y usar emit en el componente hijo:
<script setup>
import { onMounted } from "vue"
const props = defineProps({
tareas: {
type: Array,
default: [],
}
})
const emit = defineEmits(['borrar-tarea'])
const manejarBorrarTarea = (index) => {
emit('borrar-tarea', index)
}
onMounted(() => {
console.log("datos del padre: ", props.tareas)
})
</script>Es importante recordar que en el <script setup> de Vue 3, podemos usar defineProps y defineEmits para definir props y emit respectivamente.
Ahora puedes obtener tu certificado oficial de Vue, emitido por Vue School junto con la organización de Vue. En el curso de Sumérgete en Vue te preparamos para superar el examen oficial de Vue.js. Sumérgete en Vue es un curso muy práctico que no solo te va a ayudar a superar los examenes oficiales, si no que te va a preparar para el mundo real con ejercicios, retos y proyectos a realizar con este framework de JavaScript.
