Vue Track

ليه المرحلة دي مهمة

Vue سهل، والدوكيومنتيشن بتاعه ممتاز، ومستخدم كتير في ال Agencies وفرق المنتجات. ال Composition API بيشرح ال Reactivity بوضوح جداً، و Nuxt بيديك Server rendering وفيتشرز full-stack جاهزة.

تتعلم إيه

1. لازم تعرفه

   ال Single-file components وال Templates

   علّم إنه خلص

   <script setup>، و Template directives (v-if و v-for و v-model)، وال Props وال Emits، وال Slots، وال Scoped styles.

   تبقى خلصته لما

   • تقدر تعمل Components بتتعاد ب Props و Emits و Slots.

   المصادر

   • A Point of VueAbdallah Hemdan · كورس · عربي
   • Vue.js GuideDocs
2. لازم تعرفه

   ال Composition API وال Reactivity

   علّم إنه خلص

   ref و reactive و computed و watch، وال Lifecycle hooks، وال Composables لمشاركة المنطق.

   تبقى خلصته لما

   • عارف إمتى تستخدم ref وإمتى reactive.
   • كتبت Composables بتستخدمها في أكتر من Component.

   المصادر

   • Vue — Reactivity FundamentalsDocs
3. لازم تعرفه

   Vue Router و Pinia

   علّم إنه خلص

   ال Routing ب Nested routes و Navigation guards، و Pinia لل Client state المشتركة.

   تبقى خلصته لما

   • تقدر تحمي Routes ب Navigation guard.
   • ال Pinia stores عندك فيها Client state، مش API data متخزنة.

   المصادر

   • Vue RouterDocs
   • PiniaDocs
4. لازم تعرفه

   Nuxt

   علّم إنه خلص

   File-based routing، وال Server rendering وال Hybrid rendering، وال Data fetching ب useFetch، وال Server routes، وال SEO ب useHead.

   تبقى خلصته لما

   • تقدر تختار Rendering mode لكل Route وتشرح ليه.

   المصادر

   • Nuxt DocsDocs

أخطاء شائعة

• إنك تخلط ال Options API وال Composition API في نفس المشروع من غير سبب.
• إنك تعمل destructure ل reactive object فال Reactivity تضيع. استخدم toRefs أو سيب ال Object زي ما هو.