Faragiri

همهٔ زبان‌ها

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

مقدار یک عدد نمی‌تواند واکنش‌پذیر باشد، پس ویو آن را در یک جعبه می‌گذارد و جعبه را دنبال می‌کند. همه رفتارهای عجیبش از همین یک تصمیم می‌آید.

۴بخش
۲دقیقه خواندن
۴عمق

دو رابط، پنج تفاوت

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

هر سطر یک تفاوت عملی است و نه یک تفاوت سلیقه‌ای؛ همه‌شان از سطر اول می‌آیند.

رابط قدیمی‌ترکد بر اساس نوعش دسته می‌شود
رابط تازه‌ترکد بر اساس موضوعش دسته می‌شود
داده کجا تعریف می‌شوددر یک بخش جدا، کنار بقیه داده‌هاهمان جا که منطقش هست
بیرون کشیدن یک ویژگیباید از چند بخش تکه‌تکه جمع شودیک بلوک پیوسته است
استفاده دوباره از منطقبا میکسین، که منبع نام‌هایش معلوم نیستبا تابع ترکیبی، که صریح وارد می‌شود
استنتاج نوعمحدودکامل، چون همه‌اش جاوااسکریپت معمولی است
روی کامپوننت کوچککوتاه‌تر و خواناترتفاوت محسوسی ندارد

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

یک عدد در جاوااسکریپت نمی‌تواند بگوید عوض شده است. برای همین ویو مقدار را در یک جعبه می‌گذارد و آن جعبه است که تغییر را اعلام می‌کند. تقریبا هر چیزی که در این فریم‌ورک عجیب به نظر می‌رسد، از همین یک تصمیم می‌آید.

const forukhte = ref(0) یک جعبه واکنش‌پذیر می‌سازد. در کد جاوااسکریپت باید از راه خاصیت مقدار به آن دسترسی پیدا کنید، ولی در قالب لازم نیست، چون قالب خودش جعبه را باز می‌کند. همین ناهماهنگی، اولین چیزی است که تازه‌کارها را گیر می‌اندازد.

برای شی و آرایه، شکل دیگری هست که خود شی را واکنش‌پذیر می‌کند و دیگر خاصیت مقدار ندارد. قاعده عملی که تقریبا همه تیم‌ها می‌پذیرند: همه‌جا از همان جعبه استفاده کنید، حتی برای شی. یکدست بودن ارزشش از کوتاه‌تر بودن بیشتر است.

محاسبه‌شده یا ناظر

مقدار محاسبه‌شده وقتی است که چیزی را از روی بقیه حساب می‌کنید و کش هم می‌شود، پس تا وقتی ورودی‌هایش عوض نشوند دوباره اجرا نمی‌شود. ناظر وقتی است که با تغییر یک مقدار باید کاری بیرون از داده انجام شود، مثل فرستادن یک درخواست.

اشتباه رایج، استفاده از ناظر برای کاری است که محاسبه‌شده انجامش می‌دهد: نوشتن ناظری که یک مقدار را از روی دو مقدار دیگر حساب کند و در یک جعبه سوم بگذارد. نتیجه‌اش دو منبع حقیقت است و همیشه یک رندر عقب می‌ماند.

دو رابط، و اینکه کدام برای کدام کد

رابط قدیمی‌تر کد را بر اساس نوعش دسته‌بندی می‌کند: همه داده‌ها یک جا، همه متدها یک جا. رابط تازه‌تر بر اساس موضوع دسته‌بندی می‌کند: هر ویژگی با داده و منطق خودش کنار هم. روی یک کامپوننت کوچک تفاوتی ندارند و روی کامپوننتی که پانصد سطر است، رابط تازه‌تر همان چیزی است که اجازه می‌دهد یک ویژگی را کامل بیرون بکشید و در یک فایل جدا بگذارید.

همان تقسیم‌بندی که در پنج اصل، و اینکه هرکدام جلوی چه چیزی را می‌گیرد اصل اول است.

جایی که کار گیر می‌کند، منابع آموزشی نسخه قدیمی است

ویو در ایران محبوبیت زیادی دارد و بخش بزرگی از منابع فارسی‌اش برای نسخه دو نوشته شده. تفاوت نسخه‌ها فقط نحو نیست: سازوکار واکنش‌پذیری کاملا عوض شده و بعضی محدودیت‌های قدیمی، مثل نیاز به متد مخصوص برای افزودن یک کلید تازه به شی، دیگر وجود ندارند. کسی که از آن منابع شروع می‌کند، راه‌حل‌هایی یاد می‌گیرد برای مسئله‌هایی که دیگر نیستند. ساده‌ترین آزمون این است: اگر آموزشی از آن متد افزودن کلید حرف می‌زند، برای نسخه قدیمی است.

ابزار، و سالی که این حرف درست است

در سال ۲۰۲۶، ویو ۳ تنها نسخه‌ای است که پشتیبانی می‌شود و نسخه دو سال‌هاست به پایان عمر رسیده؛ متن‌باز و رایگان است. برای شروع پروژه، ابزار رسمی روی Vite بنا شده و همان است که پیشنهاد می‌شود. ابزار توسعه ویو به‌شکل افزونه مرورگر، درخت کامپوننت‌ها و مقدار زنده هر جعبه واکنش‌پذیر را نشان می‌دهد و رایگان است.

پرسش بعدی این است که وقتی این جعبه‌ها باید میان چند کامپوننت مشترک باشند، کجا بنشینند، که وضعیت مشترک کجا بنشیند، وقتی برنامه بزرگ شد است. و همین مسئله در نزدیک‌ترین همسایه‌اش شکل دیگری دارد: کامپوننت، وضعیت، و چرخه رندر.

کنار این

بالای این