ref در Composition API | ایجاد و مصرف State ساده

معرفی Vue.js، تاریخچه مختصر، فلسفه طراحی، بررسی اکوسیستم و نقش آن در توسعه رابط کاربری مدرن.

مقایسه معماری، Performance، Learning Curve، Community و سناریوهای مناسب استفاده از هر فریمورک.

بررسی Breaking Changes، بهبودهای Performance، Composition API و مزایای Vue 3 نسبت به نسخه قبلی.

معرفی هر دو سبک کدنویسی Options API و Composition API ، تفاوت ساختاری، خوانایی کد و دلیل تمرکز دوره روی Composition API.

مرور سریع مفاهیم JS مورد نیاز مثل Destructure، Arrow Functions، Modules، Promise و ES6+.

نصب ابزارهای پایه، تنظیم ادیتور، افزونه‌های ضروری VS Code برای توسعه Vue.

ایجاد پروژه با `create-vite`، بررسی اسکریپت‌های `dev`، `build`، `preview` و اجرای پروژه.

بررسی `src`، `components`، `assets`، `main.js`، `App.vue`، `index.html` و فایل‌های پیکربندی.

مفهوم SFC ، نحوه جداسازی منطق ، قالب و استایل در فایل `.vue` و مزایای این معماری.

بررسی `createApp`، اتصال اپ به DOM ، مفهوم Root Component و جریان راه‌اندازی اولیه.

استفاده از `{{ }}` برای نمایش متغیر، عبارت، فراخوانی ساده و محدودیت‌های Template Expression.

نمایش HTML خام، تفاوت با Interpolation، و هشدارهای XSS هنگام استفاده از `v-html`.

اتصال `href`، `src`، `id`، `disabled` و سایر Attributeها به داده با `v-bind`.

بازنویسی Bindingها با سینتکس کوتاه، خوانایی بهتر کد و الگوهای رایج در پروژه‌های واقعی.

افزودن/حذف کلاس بر اساس شرط، ترکیب کلاس استاتیک و دینامیک، الگوهای متداول UI.

کنترل Inline Style از طریق داده، مقادیر محاسبه‌شده و سناریوهای کاربردی استایل پویا.

گوش دادن به Click، Input و سایر رویدادها، اتصال به Method و ساختار Event Handler.

استفاده از `@`، ارسال پارامتر سفارشی به متدها و دسترسی به آبجکت Event.

خواندن `event.target`، مقدار Input، مختصات موس و کنترل جزئیات رویداد.

جلوگیری از Propagation و Default Behavior، کنترل فاز Capture و بهینه‌سازی Handlerها.

کار با Enter، Esc، Arrow Keys، ترکیب Modifierها و ساخت UX بهتر در فرم‌ها.

ترکیب کلیدهای کنترلی با کلیک و کیبورد برای پیاده‌سازی تعاملات پیشرفته‌تر.

مفهوم Two-Way Data Binding، اتصال Input به State و همگام‌سازی خودکار UI با داده.

مدیریت متن چندخطی ، Number Input ، و نکات مربوط به Type Conversion.

Bind کردن مقدار تکی و چندتایی، کار با Array در Checkbox Group و ساختار Radio Group.

اتصال Dropdown به State، انتخاب تکی/چندتایی و مقداردهی اولیه کنترل‌شده

بهینه‌سازی همگام‌سازی داده، تبدیل خودکار به عدد و حذف فاصله‌های اضافی ورودی.

رندر شرطی المان‌ها، کنترل جریان نمایش UI و الگوهای رایج Conditional UI.

تفاوت در Mount/Unmount، هزینه Performance، و انتخاب درست بر اساس سناریو.

استفاده از `<template>` برای شرط‌های گروهی بدون افزودن Node اضافه به DOM.

رندر لیست از آرایه، دسترسی به Item و Index، و ساخت UI مبتنی بر داده.

حلقه روی آبجکت‌ها، ترتیب پیمایش، و نمایش داده‌های Key-Value.

نقش `key` در Diff Algorithm، مشکلات بدون Key، و بهترین روش انتخاب Key یکتا.

رفتار همزمان دو Directive، مشکلات Performance/خوانایی و الگوهای جایگزین تمیزتر.

Proxy-based Reactivity، Dependency Tracking، Trigger و نگاه مفهومی به رندر مجدد.

ساخت State پیچیده با `reactive`، محدودیت‌ها، و الگوهای Immutable-like Update.

مقایسه خوانایی، Reassign، TypeScript DX، و Best Practice انتخاب بین این دو.

حفظ Reactivity هنگام Destructure، کاربرد `toRef`/`toRefs` و اشتباهات رایج.

تعریف Computed Property، تفاوت با Method، Caching و سناریوهای محاسبه وابسته.

پیاده‌سازی Getter/Setter در Computed و کاربرد در همگام‌سازی داده‌های مشتق‌شده.

Syntax پایه Watch، دسترسی به New/Old Value، و کنترل اجرای Callback.

Watch عمیق روی Object، اجرای فوری، و سناریوهای یک‌باراجرا.

تفاوت `watchEffect` با `watch`، Auto Dependency Collection و موارد استفاده مناسب.

مدیریت Timer، EventListener و Requestهای ناتمام با Cleanup Function.

اصل Separation of Concerns، Reusability، Maintainability و ساختار درختی کامپوننت‌ها.

ایجاد فایل کامپوننت، Import، استفاده در Template و قوانین نام‌گذاری.

تعریف Props ، ارسال داده ، فقط‌خواندنی بودن Props و جریان One-Way Data Flow

Type، Required، Default، Validator سفارشی و مستندسازی ضمنی کامپوننت.

تعریف Event، Emit کردن Payload، نام‌گذاری Eventها و الگوی Communication استاندارد.

ساخت کامپوننت‌های Form-Friendly با `modelValue` و `update:modelValue`.

پیاده‌سازی چند v-model همزمان روی یک کامپوننت و کاربرد در فرم‌های پیچیده.

مفهوم Content Projection ، ساخت Wrapper Component و افزایش انعطاف UI

تعریف چند Slot با نام، ترکیب Header/Body/Footer و الگوی Card/Layout.

API پیشرفته Slot، Render Prop Pattern در Vue و ساخت کامپوننت‌های Data-Driven

تعریف محتوای پیش‌فرض Slot، بهبود DX و جلوگیری از UI خالی.

تعریف `ref` در Template، دسترسی بعد از Mount و کاربردهای مجاز/غیرمجاز.

چرخه حیات کامپوننت، زمان اجرای هر Hook و انتخاب Hook مناسب برای Side Effect.

تفاوت Before/After Hooks، کاربرد در Cleanup، اندازه‌گیری و آماده‌سازی منابع.

تعریف Provider در Ancestor، Inject در Descendant، و معماری داده در درخت کامپوننت.

Provide کردن `ref`/`reactive`، به‌روزرسانی متمرکز و نکات طراحی API داخلی.

فراخوانی REST API، ذخیره نتیجه در `ref`، رندر داده و مدیریت خطاهای شبکه.

طراحی State Machine ساده برای درخواست‌ها و نمایش وضعیت‌های مختلف به کاربر.

ذخیره و بازیابی داده، Sync با State و نکات مربوط به JSON Serialize/Deserialize.

پیاده‌سازی CRUD، فیلتر وضعیت‌ها، ویرایش درون‌خطی، Persistent Storage و جمع‌بندی الگوهای دوره.