الدالة setup() وscript setup
اكتب المنطق في الدالة setup() أو استخدم صياغة المختصرة، وأظهر القيم للقالب، وافهم خطافات دورة الحياة في Composition API.
الدالة setup() وscript setup درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
الدالة setup()
في Composition API الخاصة بـVue 3، تُعد setup() خيارًا للمكوّن يحلّ محل data وmethods وcomputed وwatch. تستقبل props وسياق setup كوسيطين، وتُعيد ما يحتاج إليه القالب.
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> — اختصار الصياغة
تُعد <script setup> اختصارًا للصياغة أثناء الترجمة من أجل setup(). يصبح كل ما تُعلنه على المستوى الأعلى متاحًا تلقائيًا في القالب. ولا تحتاج إلى جملة return.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>خطافات دورة الحياة في setup()
خطافات دورة الحياة في Vue 3 هي دوال مستوردة، مثل: onMounted وonUpdated وonUnmounted وonBeforeMount وonBeforeUpdate وغيرها. ويمكن استدعاؤها عدة مرات لتسجيل عدة معالجات.
<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()
في setup() تكون props تفاعلية. لا تفكّكها مباشرةً — استخدم toRefs(props)، أو وصِل إليها عبر props.x للحفاظ على التفاعلية.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — إتاحة العناصر للمكوّن الأب
لا تُتيح مكوّنات