La API de composició és una de les característiques més destacades introduïdes en Vue 3. Aquesta API proporciona una manera més flexible i escalable de gestionar la lògica de components, especialment en aplicacions grans i complexes. En aquest mòdul, explorarem els conceptes clau de la API de composició, veurem exemples pràctics i realitzarem exercicis per consolidar els coneixements.
Continguts
- Introducció a la API de composició
- Setup Function
- Refs i Reactive
- Computed i Watch
- Mètodes de cicle de vida
- Composables
- Exercicis pràctics
- Introducció a la API de composició
La API de composició permet organitzar la lògica del component en funcions reutilitzables. Això facilita la separació de preocupacions i la reutilització de codi.
Avantatges de la API de composició:
- Reutilització de codi: Permet crear funcions reutilitzables que encapsulen la lògica del component.
- Millor organització: Facilita la separació de la lògica en funcions més petites i manejables.
- Tipat: Millor suport per a TypeScript.
- Setup Function
La setup function és el punt d'entrada de la API de composició. Es crida abans que el component sigui creat i és on es defineixen les variables reactives, mètodes i altres elements.
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>Explicació:
refcrea una referència reactiva.count.valueaccedeix al valor de la referència.- La funció
incrementincrementa el valor decount.
- Refs i Reactive
Refs
Les refs són objectes reactius que contenen un valor únic.
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1Reactive
reactive crea un objecte reactiu que pot contenir múltiples propietats.
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
console.log(state.count); // 0
state.count++;
console.log(state.count); // 1
- Computed i Watch
Computed
Les propietats computades són valors derivats que es recalculen automàticament quan les seves dependències canvien.
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
console.log(doubleCount.value); // 0
count.value++;
console.log(doubleCount.value); // 2Watch
Els observadors (watch) permeten reaccionar a canvis en valors reactius.
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
count.value++; // Count changed from 0 to 1
- Mètodes de cicle de vida
Els mètodes de cicle de vida es poden utilitzar dins de la setup function.
import { onMounted, onUnmounted } from 'vue';
onMounted(() => {
console.log('Component mounted');
});
onUnmounted(() => {
console.log('Component unmounted');
});
- Composables
Els composables són funcions que encapsulen la lògica reutilitzable utilitzant la API de composició.
// useCounter.js
import { ref } from 'vue';
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
// Component.vue
<script setup>
import { useCounter } from './useCounter';
const { count, increment } = useCounter();
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
- Exercicis pràctics
Exercici 1: Crear un comptador amb la API de composició
- Crea un component que utilitzi
refper crear un comptador. - Afegeix un botó per incrementar el comptador.
- Mostra el valor del comptador en el template.
Solució:
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>Exercici 2: Crear una propietat computada
- Crea una propietat computada que dobli el valor del comptador.
- Mostra el valor de la propietat computada en el template.
Solució:
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => count.value++;
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
</div>
</template>Conclusió
La API de composició de Vue 3 proporciona una manera poderosa i flexible de gestionar la lògica dels components. Amb setup, ref, reactive, computed, watch i els mètodes de cicle de vida, podem crear components més organitzats i reutilitzables. Els composables ens permeten encapsular la lògica reutilitzable de manera eficient. Practicar aquests conceptes és clau per dominar la API de composició i aprofitar al màxim les seves capacitats.
Curs de Vue.js
Mòdul 1: Introducció a Vue.js
- Què és Vue.js?
- Configuració de l'entorn de desenvolupament
- Creant la teva primera aplicació Vue
- Entenent la instància de Vue
Mòdul 2: Conceptes bàsics de Vue.js
- Sintaxi de plantilles
- Enllaç de dades
- Propietats computades i observadors
- Enllaços de classes i estils
- Renderització condicional
- Renderització de llistes
Mòdul 3: Components de Vue.js
- Introducció als components
- Props i esdeveniments personalitzats
- Slots
- Components dinàmics i asíncrons
- Comunicació entre components
Mòdul 4: Vue Router
- Introducció a Vue Router
- Configuració de Vue Router
- Rutes dinàmiques
- Rutes niades
- Guàrdies de navegació
Mòdul 5: Gestió d'estat amb Vuex
- Introducció a Vuex
- Estat, getters, mutacions i accions
- Mòduls a Vuex
- Utilitzant Vuex en components
- Patrons avançats de Vuex
Mòdul 6: Directives de Vue.js
Mòdul 7: Plugins de Vue.js
Mòdul 8: Proves en Vue.js
Mòdul 9: Conceptes avançats de Vue.js
- Funcions de renderització i JSX
- Renderització del costat del servidor (SSR) amb Nuxt.js
- API de composició de Vue 3
- Optimització del rendiment