()watchEffect | ردیابی خودکار وابستگی‌ها

01

09:44

اپیزود 1 رایگان

Vue.js چیست؟ بررسی معماری، اکوسیستم و جایگاه آن در Frontend Development

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

02

10:15

اپیزود 2 رایگان

مقایسه فنی Vue.js با React و Angular | انتخاب درست برای پروژه

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

03

08:34

اپیزود 3 رایگان

Vue 3 در برابر Vue 2 | تغییرات کلیدی و دلایل مهاجرت

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

04

08:02

اپیزود 4 رایگان

Options API در مقابل Composition API | کدام را برای شروع انتخاب کنیم؟

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

05

08:20

اپیزود 5 رایگان

پیش‌نیازهای فنی دوره | HTML، CSS، JavaScript ضروری برای Vue

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

06

08:25

اپیزود 6

آماده‌سازی محیط توسعه | نصب Node.js، npm و yarn و VS Code

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

07

13:42

اپیزود 7

راه‌اندازی پروژه Vue 3 با Vite | ساخت اولین پروژه استاندارد

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

08

09:14

اپیزود 8

آناتومی پروژه Vite + Vue | نقش هر فایل و پوشه در معماری پروژه

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

09

11:17

اپیزود 9

Single File Component (SFC) | ساختار Template، Script و Style

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

10

06:29

اپیزود 10

Entry Point در Vue | درک `createApp` و Mount کردن اپلیکیشن

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

11

07:05

اپیزود 11

Text Interpolation در Template | نمایش داده با Mustache Syntax

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

12

09:59

اپیزود 12

Raw HTML Rendering با v-html | کاربرد و نکات امنیتی

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

13

11:55

اپیزود 13

Attribute Binding با v-bind | اتصال دینامیک ویژگی‌های HTML

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

14

09:41

اپیزود 14

سینتکس مخفف v-bind | استفاده حرفه‌ای از `:` در Template

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

15

07:59

اپیزود 15

Class Binding پیشرفته | مدیریت کلاس‌های شرطی با Object و Array

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

16

08:03

اپیزود 16

Style Binding پیشرفته | استایل‌دهی دینامیک با Object و Array

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

17

06:40

اپیزود 17

Event Handling با v-on | تعریف و مدیریت رویدادهای کاربر

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

18

07:32

اپیزود 18

سینتکس مخفف v-on و ارسال آرگومان به Handlerها

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

19

07:22

اپیزود 19

کار با event$ | دسترسی دقیق به Event Object در Vue

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

20

به‌زودی

اپیزود 20 به‌زودی

Event Modifiers | stop، prevent، capture، self، once و passive

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

21

به‌زودی

اپیزود 21 به‌زودی

Key Modifiers | مدیریت حرفه‌ای رویدادهای کیبورد

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

22

به‌زودی

اپیزود 22 به‌زودی

Mouse و System Modifiers | ctrl، alt، shift، meta در رویدادها

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

23

به‌زودی

اپیزود 23 به‌زودی

Two-Way Binding با v-model | ارتباط دوطرفه پایه

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

24

به‌زودی

اپیزود 24 به‌زودی

v-model روی Textarea و Inputهای عددی | جزئیات کاربردی

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

25

به‌زودی

اپیزود 25 به‌زودی

v-model در Checkbox و Radio Button | مدیریت انتخاب کاربر

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

26

به‌زودی

اپیزود 26 به‌زودی

v-model در Select و Multiple Select | مدیریت لیست‌های انتخابی

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

27

به‌زودی

اپیزود 27 به‌زودی

v-model Modifiers | lazy، number و trim

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

28

به‌زودی

اپیزود 28 به‌زودی

Conditional Rendering با v-if ، v-else-if و v-else

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

29

به‌زودی

اپیزود 29 به‌زودی

v-show در برابر v-if | تفاوت عملکردی و تصمیم‌گیری بهینه

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

30

به‌زودی

اپیزود 30 به‌زودی

Template Tag در Conditional Rendering | گروه‌بندی بدون عنصر اضافی

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

31

به‌زودی

اپیزود 31 به‌زودی

List Rendering با v-for | حلقه روی Array

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

32

به‌زودی

اپیزود 32 به‌زودی

v-for روی Object | پیمایش کلید، مقدار و ایندکس

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

33

به‌زودی

اپیزود 33 به‌زودی

اهمیت key در v-for | هویت‌دهی به VNode و جلوگیری از باگ UI

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

34

به‌زودی

اپیزود 34 به‌زودی

v-for همراه با v-if | قوانین اولویت و اشتباهات رایج

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

35

به‌زودی

اپیزود 35 به‌زودی

مبانی Reactivity در Vue 3 | سیستم واکنش‌پذیری چگونه کار می‌کند؟

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

36

به‌زودی

اپیزود 36 به‌زودی

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

تعریف State با `ref`، دسترسی به `.value` در Script و Unwrap خودکار در Template.

37

به‌زودی

اپیزود 37 به‌زودی

()reactive در Composition API | مدیریت Stateهای آبجکتی

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

38

به‌زودی

اپیزود 38 به‌زودی

ref در برابر reactive | معیارهای انتخاب در معماری State

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

39

به‌زودی

اپیزود 39 به‌زودی

destructure ایمن داده‌های Reactive | toRef و toRefs

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

40

به‌زودی

اپیزود 40 به‌زودی

computed() | State مشتق‌شده و کش‌شده

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

41

به‌زودی

اپیزود 41 به‌زودی

Writable Computed | Computedهای قابل نوشتن

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

42

به‌زودی

اپیزود 42 به‌زودی

()watch | نظارت دقیق روی تغییرات Source مشخص

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

43

به‌زودی

اپیزود 43 به‌زودی

قابلیت‌های پیشرفته watch | deep، immediate و once

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

44

به‌زودی

اپیزود 44 به‌زودی

()watchEffect | ردیابی خودکار وابستگی‌ها

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

45

به‌زودی

اپیزود 45 به‌زودی

پاک‌سازی Side Effect در Watchers | OnCleanup Pattern

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

46

به‌زودی

اپیزود 46 به‌زودی

معماری Component-Based

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

47

به‌زودی

اپیزود 47 به‌زودی

ساخت و ثبت کامپوننت | Local Registration در Vue 3

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

48

به‌زودی

اپیزود 48 به‌زودی

Props Fundamentals با defineProps | قرارداد داده از والد به فرزند

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

49

به‌زودی

اپیزود 49 به‌زودی

Prop Validation و Prop Types | طراحی API امن برای کامپوننت

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

50

به‌زودی

اپیزود 50 به‌زودی

جابه‌جایی داده از فرزند به والد با defineEmits

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

51

به‌زودی

اپیزود 51 به‌زودی

v-model روی کامپوننت‌های سفارشی | پیاده‌سازی Dual Binding

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

52

به‌زودی

اپیزود 52 به‌زودی

Multiple v-model در یک کامپوننت | Bindهای نام‌گذاری‌شده

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

53

به‌زودی

اپیزود 53 به‌زودی

Default Slot | تزریق محتوا به کامپوننت از بیرون

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

54

به‌زودی

اپیزود 54 به‌زودی

Named Slots | طراحی Layout Componentهای انعطاف‌پذیر

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

55

به‌زودی

اپیزود 55 به‌زودی

Scoped Slots | ارسال داده از فرزند به محتوای Slot

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

56

به‌زودی

اپیزود 56 به‌زودی

Fallback Content در Slots | محتوای پیش‌فرض حرفه‌ای

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

57

به‌زودی

اپیزود 57 به‌زودی

Template Refs | دسترسی مستقیم به DOM و Component Instance

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

58

به‌زودی

اپیزود 58 به‌زودی

Lifecycle Hooks در Composition API | onMounted تا onUnmounted

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

59

به‌زودی

اپیزود 59 به‌زودی

onBeforeMount ، onBeforeUpdate و onBeforeUnmount | کنترل فازهای حساس

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

60

به‌زودی

اپیزود 60 به‌زودی

Provide و Inject | اشتراک State بدون Prop Drilling

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

61

به‌زودی

اپیزود 61 به‌زودی

Provide/Inject واکنش‌پذیر | اشتراک State زنده بین لایه‌ها

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

62

به‌زودی

اپیزود 62 به‌زودی

Fetch API در Vue | دریافت داده Async و Bind به State

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

63

به‌زودی

اپیزود 63 به‌زودی

مدیریت Loading، Error و Empty State در UI داده‌محور

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

64

به‌زودی

اپیزود 64 به‌زودی

کار با LocalStorage در Vue | پایدارسازی State در مرورگر

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

65

به‌زودی

اپیزود 65 به‌زودی

پروژه نهایی: طراحی و پیاده‌سازی کامل Todo App با Composition API

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