Composition API
Con la llegada de Vue 3, se ha introducido una nueva API de composición que nos permite reutilizar código y crear componentes más pequeños y reutilizables. En este curso, aprenderemos a utilizar la nueva API de composición para crear componentes más pequeños y reutilizables.
La Composition API es la nueva forma en Vue.js desde la versión 3 para crear nuestros componentes. Es solo cuestión de estilos.
Options API se centra en el concepto de una "instancia de componente", que generalmente se alinea mejor con un modelo mental basado en clases para usuarios que provienen de entornos de lenguaje OOP. También es más amigable para principiantes al abstraer los detalles de reactividad y hacer cumplir la organización del código a través de grupos de opciones.
Composition API se centra en declarar variables de estado reactivas directamente en el ámbito de una función y componer el estado de varias funciones juntas para manejar la complejidad. Tiene una forma más libre y requiere una comprensión de cómo funciona la reactividad en Vue para ser utilizado de manera efectiva. A cambio, su flexibilidad permite patrones más poderosos para organizar y reutilizar la lógica.
Si eres nuevo en Vue, te recomiendo:
Para propósitos de aprendizaje, elige el estilo que te parezca más fácil de entender. Una vez más, la mayoría de los conceptos básicos se comparten entre los dos estilos. Siempre puedes elegir el otro estilo más tarde.
Para uso en producción:
- Usa con la API de opciones si no está utilizando herramientas de compilación, o planeas usar Vue principalmente en escenarios de baja complejidad.
- Elija Composición API + Componentes de un solo archivo si planeas crear aplicaciones completas con Vue.
A partir de ahora tenemos una función setup que sirve de punto de entrada devolviendo (return) o exponiendo públicamente aquellos elementos que necesitamos en las vistas. Además, importaremos aquellos elementos que necesitemos en todo momento (más eficiente el código). Siempre tomamos de setup como parámetros primero las props, y luego el contexto: setup(props, context)
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
// expose to template and other options API hooks, debes exponerlo para usarlo!
return {
count
}
},
mounted() {
console.log(count.value) // 0
}
}
</script>Si tenemos que usar props, las recibimos como parámetro de la función setup. Si no las usamos, podemos omitirlas o usar context para recoger el resto de parámetros.
export default {
setup(props, context) {
// Attributes (Non-reactive object, equivalent to $attrs)
console.log(context.attrs)
// Slots (Non-reactive object, equivalent to $slots)
console.log(context.slots)
// Emit events (Function, equivalent to $emit)
console.log(context.emit)
// Expose public properties (Function)
console.log(context.expose)
}
}Podemos usar desestructuración para recibir solo lo que necesitamos.
export default {
setup(props, { attrs, slots, emit, expose }) {
...
}
}Además, tenemos la forma abreviada que es script setup, lo veremos más adelante.
<script setup>
...
</script>Usaremos ref para crear referencias reactivas a elementos simples y reactive para crear referencias reactivas a elementos más complejos. Si usamos ref accedemos al valor en lectura y escritura bajo .value.
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) //Usaremos computed para crear referencias computadas de solo lectura. También podemos hacer de escritura.
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
// Ejemplo de computed de escritura
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
}
})Tenemos de distinto tipo, permitiéndonos reaccionar a cambios en referencias reactivas.
const count = ref(0)
watch(count, (count, prevCount) => {
console.log(count, prevCount)
})Usaremos los siguientes hooks
<script setup>
import { ref, onMounted } from 'vue'
const el = ref()
onMounted(() => {
el.value // <div>
})
</script>
<template>
<div ref="el"></div>
</template>Usaremos las propiedades, como siempre, para comunicarnos de padre a hijo.
export default {
props: ['foo'],
setup(props) {
// setup() receives props as the first argument.
console.log(props.foo)
},
}Usaremos los eventos para comunicarnos de hijo a padre.
export default {
emits: ['inFocus', 'submit'],
setup(props, ctx) {
ctx.emit('submit')
},
}Setup es cerrado por defecto, si queremos hacer algo público fuera de los enlaces de la platilla usamos expose
export default {
// only `publicMethod` will be available on the public instance
expose: ['publicMethod'],
methods: {
publicMethod() {
// ...
},
privateMethod() {
// ...
}
}
}Puedes usar Composition u Option, e incluso en el mismo componente ambos. Puedes ir migrando poco a poco.
Es la nueva forma recomendada de usar la Composition API y tienes varias ventajas:
- Código más compacto y legible.
- Capacidad para declarar propiedades y eventos emitidos usando TypeScript puro.
- Variables reactivas y componentes importados se exponen de manera automática (si no usa private)
- Mejor rendimiento en tiempo de ejecución (la plantilla se compila en una función de representación en el mismo ámbito, sin un proxy intermedio)
- Mejor rendimiento de inferencia de tipo IDE (menos trabajo para que el servidor de idioma extraiga tipos del código)
- Es importante tener Volar como extensión.
- Usar componentes dinámicos
<script setup>
console.log('hello script setup')
</script>Debes usar defineProps y defineEmits para definir las propiedades y eventos emitidos.
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>Setup es cerrado por defecto, puedes usar defineExpose para exponer
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>Este tema tiene varios ejercicios, puedes realizarlos aquí
Codificado con 💖 por José Luis González Sánchez.
Cualquier cosa que necesites házmelo saber por si puedo ayudarte 💬.
Este repositorio y todo su contenido está licenciado bajo licencia Creative Commons, si desea saber más, vea la LICENSE. Por favor si compartes, usas o modificas este proyecto cita a su autor, y usa las mismas condiciones para su uso docente, formativo o educativo y no comercial.
JoseLuisGS by José Luis González Sánchez is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional License.
Creado a partir de la obra en https://github.com/joseluisgs.
