setup() İşlevi ve script setup
Mantığı setup() işlevinde yazın veya kolaylığını kullanın, değerleri template'e açın ve Composition API'deki yaşam döngüsü kancalarını öğrenin.
setup() İşlevi ve script setup, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
setup() İşlevi
Vue 3'ün Composition API'sinde setup(), data, yöntemler, computed ve watch seçeneklerinin yerini alan bir bileşen seçeneğidir. props'ları ve setup bağlamını bağımsız değişken olarak alır ve şablonun ihtiyaç duyduğu değerleri döndürür.
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> — Sözdizimi Kısaltması
<script setup>, setup() için derleme zamanında kullanılan bir sözdizimi kısaltmasıdır. En üst düzeyde tanımlanan her şey şablonda otomatik olarak kullanılabilir. return ifadesine gerek yoktur.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>setup() İçindeki Yaşam Döngüsü Kancaları
Vue 3 yaşam döngüsü kancaları içe aktarılan işlevlerdir: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate ve diğerleri. Birden çok işleyici kaydetmek için birden çok kez çağrılabilirler.
<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>setup() İçindeki props'lar
setup() içinde props'lar reaktiftir. Bunları doğrudan parçalarına ayırmayın — reaktiviteyi korumak için toRefs(props) kullanın veya props.x üzerinden erişin.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — Üst Bileşene Açma
Varsayılan olarak