Funkcja setup() i script setup
Proszę pisać logikę w funkcji setup() lub używać skróconej składni , udostępniać wartości szablonowi oraz zrozumieć hooki cyklu życia w Composition API.
Funkcja setup() i script setup to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Funkcja setup()
W Composition API biblioteki Vue 3 setup() jest opcją komponentu, która zastępuje data, methods, computed i watch. Otrzymuje propsy oraz kontekst setup jako argumenty i zwraca to, czego potrzebuje szablon.
export default {
props: { userId: String },
setup(props, { emit, attrs, slots }) {
const user = ref(null);
onMounted(async () => {
user.value = await fetchUser(props.userId);
});
return { user }; // must return what template uses
}
};<script setup> — cukier składniowy
<script setup> to cukier składniowy stosowany podczas kompilacji dla setup(). Wszystko zadeklarowane na najwyższym poziomie jest automatycznie dostępne w szablonie. Nie trzeba używać instrukcji return.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Haki cyklu życia w setup()
Haki cyklu życia Vue 3 to importowane funkcje: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate itd. Można wywoływać je wielokrotnie, aby rejestrować wiele funkcji obsługi.
<script setup>
import { onMounted, onUnmounted } from 'vue';
let timer: ReturnType<typeof setInterval>;
onMounted(() => {
timer = setInterval(tick, 1000);
console.log('Component mounted');
});
onUnmounted(() => {
clearInterval(timer); // cleanup
});
</script>Propsy w setup()
W setup() propsy są reaktywne. Nie należy ich bezpośrednio destrukturyzować — należy użyć toRefs(props) albo odwoływać się do nich przez props.x, aby zachować reaktywność.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — udostępnianie komponentowi nadrzędnemu
Domyślnie komponenty