فلش‌کارت‌های آموزشی برنامه‌نویسی واکنش‌گرا و مدرن با وی‌‌جی‌اس (Vue.js 3) و کامپوزیشن‌آپی

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره برنامه‌نویسی واکنش‌گرا و مدرن با وی‌‌جی‌اس (Vue.js 3) و کامپوزیشن‌آپی

موضوع کلی: توسعه نرم‌افزار و طراحی رابط کاربری (UI/UX)

موضوع میانی: برنامه‌نویسی فرانت‌اند با فریم‌ورک‌های مدرن

📋 سرفصل‌های دوره

• 1. آشنایی با Vue.js 3 و تفاوت آن با نسخه‌های قبلی
• 2. نصب و پیکربندی محیط توسعه برای Vue 3 با Composition API
• 3. ساخت اولین برنامه واکنش‌گرا با استفاده از سینتکس setup()
• 4. مفاهیم پایه‌ای واکنش‌گرایی: ری‌اکت، state و effect
• 5. استفاده از ref برای مدیریت state واکنش‌گرا
• 6. مفهوم computed properties و محاسبات خودکار
• 7. متغیرهای محلی (local) با استفاده از ref و توابع
• 8. نحوه‌ی واچ‌کردن تغییرات state با watch
• 9. عمیق‌نگری با watchEffect
• 10. تعریف و استفاده از Props در کامپوننت‌های Composition API
• 11. نحوه‌ی ارسال رویداد (emit) از کامپوننت فرزند به والد
• 12. ساخت کامپوننت‌های اساس (اساس) و بازاستفاده‌پذیر
• 13. سازماندهی کامپوننت‌ها و ساختار پوششی (folder structure)
• 14. کامپوننت‌های دینامیک با استفاده از v-for
• 15. دستکاری DOM با استفاده از ref و توابع 참조
• 16. تعریف دستورات سفارشی (custom directives)
• 17. استفاده از اسلات‌ها (slots) برای ارتباط بین کامپوننت‌ها
• 18. کامپوننت‌های همپوشان (portal) با استفاده از Teleport
• 19. مدیریت state با Pinia به جای Vuex
• 20. انتخاب و پیکربندی پینیا (store) و تعریف مدل‌ها
• 21. اتصال پینیا به کامپوننت‌ها با استفاده از useStore
• 22. ابزارهای کمک‌رسان پینیا: defineStore، loadStore و غیره
• 23. به‌روزرسانی همزمان state با استفاده از actions
• 24. استفاده از پینیا در برنامه‌های بزرگ با فایل‌بندی مجزا
• 25. تست واحد کامپوننت‌های Vue با استفاده از Vue Test Utils
• 26. نوشتن تست‌های unit برای state واکنش‌گرا و محاسباتی
• 27. شبیه‌سازی رویدادها و تعامل با کامپوننت‌ها در تست‌ها
• 28. بررسی پوشش کد با Istanbul و غیره
• 29. بهینه‌سازی عملکرد: shallow reactivity و shallowRef
• 30. استفاده از computed با shallow برای محاسبات سنگین
• 31. کاهش ریندرینگ با استفاده از memoized computed
• 32. بهینه‌سازی لیست‌های بزرگ با v-memo
• 33. استفاده از Change Detection Strategy برای بهبود عملکرد
• 34. یکپارچه‌سازی TypeScript با Vue 3 و Composition API
• 35. پیکربندی tsconfig برای Vue
• 36. تایپ‌دهی Prop‌ها و emit در کامپوننت‌ها
• 37. استفاده از Ref<T> و Computed<T> با تایپ‌ها
• 38. مدیریت خطا با استفاده از error handling در setup
• 39. نمایش پیام‌های موقت (toast) با کامپوننت‌های پوششی
• 40. ساخت system wide provider با inject و provide
• 41. پیکربندی SEO-friendly با استفاده از meta tags در کامپوننت‌ها
• 42. پیکربندی مسیرها با Vue Router و Composition API
• 43. ساخت store برای مسیر با useRoute
• 44. ناوبری برنامه‌ای با useRouter
• 45. ساخت لینک‌های active با کلاس‌های پویا
• 46. مدیریت ناوبری با composition در لایه‌ی guard
• 47. یکپارچه‌سازی Vue Router با پینیا برای state کاربر
• 48. ساخت project layout با استفاده از کامپوننت‌های پوششی
• 49. ساخت experience profile با composition و پینیا
• 50. مدیریت احراز هویت با توکن در Vue و پینیا
• 51. پیکربندی خطاهای جهانی با error handling در App
• 52. نمایش skeleton loading با استفاده از کامپوننت‌های skeleton
• 53. ساخت custom hook برای منطق‌های بازاستفاده‌پذیر
• 54. ساخت hook برای کار با localStorage
• 55. ساخت hook برای کار با debounce و throttle
• 56. ساخت hook برای کار با window size و orientation
• 57. ساخت hook برای کار با click outside
• 58. استفاده از watch با multi‑sources
• 59. استفاده از effectScope برای مدیریت effectهای متعدد
• 60. پیکربندی ESLint و Prettier برای پروژه‌های Vue
• 61. استفاده از Husky برای hook در زمان commit
• 62. ساخت CI/CD با GitHub Actions برای Vue apps
• 63. استقرار برنامه با Vercel
• 64. استقرار برنامه با Netlify
• 65. استفاده از Cloudflare Pages
• 66. پیکربندی پشتیبانی از Service Worker با Workbox
• 67. ساخت PWA با Vue CLI یا Vite
• 68. بررسی عملکرد با Lighthouse
• 69. مدیریت theme (روشن/تاریک) با composition و provide
• 70. ساخت theme toggle component
• 71. پشتیبانی از سیستم‌های رنگ‌پردازی با متغیرهای CSS
• 72. ساخت custom CSS variables for theming
• 73. استفاده از CSS Modules در کامپوننت‌های Vue
• 74. استفاده از Tailwind CSS با Vue (نظیر Jetstream)
• 75. ساخت design system با کامپوننت‌های بازتعریف‌شده
• 76. مستندسازی کامپوننت‌ها با Storybook
• 77. ساخت مستندات API با Vuepress یا Docus
• 78. برگزاری وبینارهای زنده با Vue Live Demo
• 79. ساخت pluginهای سفارشی برای Vue
• 80. انتشار plugin در npm
• 81. کار با Deep linking و hash mode در Vue Router
• 82. پیکربندی meta tags برای شبکه‌های اجتماعی (Open Graph)
• 83. ساخت SEO-friendly routes با dynamic title
• 84. پشتیبانی از زبان‌های متعدد با i18n (برنامه‌نویسی بین‌المللی)
• 85. استفاده از Vue I18n composition API
• 86. پیکربندی i18n with formatMessage
• 87. ساخت UI library بر اساس Vue 3 Composition API
• 88. ساخت کامپوننت‌های UI با قابلیت سفارشی‌سازی
• 89. پیکربندی storybook برای library development
• 90. تست library با Jest و Vue Test Utils
• 91. انتشار library به npm
• 92. آموزش advanced patterns: renderless components
• 93. آموزش advanced patterns: composable functions
• 94. آموزش advanced patterns: dependency injection
• 95. آموزش advanced patterns: custom ref معادل
• 96. آموزش advanced patterns: کامپوننت‌های condition rendering
• 97. آموزش advanced patterns: کامپوننت‌های conditional with v-show
• 98. آموزش advanced patterns: کامپوننت‌های toggle
• 99. آموزش advanced patterns: کامپوننت‌های portal و teleport
• 100. مرور کلی و راهنمای مطالعه برای یادگیری سریع