Vapor Mode پیش‌روی Vue 3.6 همین پاییز عرضه خواهد شد و کاری را انجام می‌دهد که این فریم‌ورک تا به حال انجام نداده است: کامپوننت‌های تک‌فایلی (single-file components) را مستقیماً به به‌روزرسانی‌های DOM تبدیل می‌کند و کاملاً virtual DOM را دور می‌زند.

چرا Vue از virtual DOM روی برمی‌گرداند

از زمان Vue 2، virtual DOM هسته مدل واکنش‌گرایی (reactivity) این فریم‌ورک بوده است. وقتی وضعیت (state) تغییر می‌کند، Vue یک درخت سبک در حافظه می‌سازد، آن را با نسخه قبلی مقایسه (diff) می‌کند و فقط بخش‌هایی را که متفاوت هستند اصلاح (patch) می‌کند. این غیرمستقیم بودن به توسعه‌دهندگان اجازه می‌دهد تا بدون نگرانی از اینکه کدام المان واقعاً نیاز به به‌روزرسانی دارد، کد اعلامی (declarative) بنویسند. هزینه این کار این است که هر بار رندر، همچنان هزینه ساخت و مقایسه آن درخت مجازی را می‌پردازد.

Vapor Mode آن مرحله میانی را حذف می‌کند. در طول فرآیند ساخت (build)، کامپایلر Vue قالب (template) را تحلیل کرده و جاوااسکریپتی تولید می‌کند که متدهای بومی DOM را مستقیماً در جایی که تغییر لازم است فراخوانی می‌کند—مانند element.textContent = … یا element.setAttribute(...). هیچ گره مجازی (virtual node) ایجاد نمی‌شود و هیچ حلقه diffing اجرا نمی‌گردد. در نهایت، باندل (bundle) فقط شامل کدهای مورد نیاز برای به‌روزرسانی‌های مشخصی است که نوشته‌اید، به اضافه runtime مورد نیاز برای واکنش‌گرایی.

تأثیر واقعی بر اندازه و سرعت

  • اندازه باندل – با حذف runtime مربوط به virtual DOM و ساختارهای داده‌ای آن، کد تولید شده کوچک‌تر می‌شود. در پروژه‌هایی با شبکه‌ها (grids) یا بوم‌های (canvases) بزرگ که ده‌ها بار در ثانیه به‌روزرسانی می‌شوند، این صرفه‌جویی به‌ویژه در اتصالات با پهنای باند کم، بسیار چشمگیر است.
  • عملکرد – فراخوانی‌های مستقیم DOM، سربار فرآیند diffing را حذف می‌کنند که این موضوع هنگام تغییرات با فرکانس بالا در رابط کاربری (UI) کاملاً محسوس است. من در مجموعه‌ای از بازی‌های شخصی مرورگر—یک nonogram، یک شبیه‌ساز minesweeper و یک بصری‌ساز سه‌بعدی مکعب روبیک—منطق رندرینگ را به صورت دستی نوشتم و DOM را فقط در موارد ضروری به‌روزرسانی کردم.
  • راحتی کار توسعه‌دهنده (Developer ergonomics) – کارهای سنگین را کامپایلر انجام می‌دهد. شما همچنان قالب‌های معمولی Vue را می‌نویسید و نیازی نیست فراخوانی‌های document.querySelector را به صورت دستی بنویسید. کد تولید شده مشابه همان رویکرد دستی است که در آن بازی‌ها بهترین عملکرد را به من داد.

چه زمانی Vapor Mode واقعاً کمک می‌کند

  1. به‌روزرسانی‌های با فرکانس بالا روی ساختارهای بزرگ – بازی‌ها، داشبوردهای داده‌محور، یا هر رابط کاربری که در هر تیک (tick) سلول‌های زیادی را بازطراحی می‌کند، بیشترین بهره را می‌برند. مقایسه (diffing) یک شبکه بزرگ در هر تیک می‌تواند بخش بزرگی از بودجه فریم (frame budget) را مصرف کند؛ به‌روزرسانی‌های مستقیم، کار را خطی و قابل پیش‌بینی نگه می‌دارند.
  2. استقرارها با محدودیت اندازه باندل – سایت‌های mobile-first که باید زیر چند صد کیلوبایت بارگذاری شوند، با حذف runtime مربوط به virtual DOM، کاهش ملموسی در حجم را تجربه می‌کنند.
  3. وضعیت (state) خالص و قابل پیش‌بینی – Vapor Mode فرض را بر این می‌گذارد که شما وضعیت را تغییرناپذیر (immutable) نگه می‌دارید و با DOM به عنوان یک نمایش خالص از آن وضعیت برخورد می‌کنید. اگر کد شما اثرات جانبی (side-effects) را با هم ترکیب کند یا خارج از سیستم واکنش‌گرایی Vue، DOM را تغییر دهد، به‌روزرسانی‌های تولید شده ممکن است از همگام‌سازی خارج شوند و باعث بروز اختلالات بصری شوند.

کجا رویکرد قدیمی همچنان برنده است

  • رابط‌های کاربری با فرکانس پایین – فرم‌های ساده، صفحات استاتیک یا پنل‌های مدیریتی که فقط با اقدامات گاه‌به‌گاه کاربر دوباره رندر می‌شوند، بهبود عملکرد ناچیزی خواهند داشت. کار اضافی برای ساخت یک درخت مجازی در مقایسه با تأخیر شبکه یا زمان پردازش سرور ناچیز است.
  • سلسله‌مراتب پیچیده کامپوننت‌ها – وقتی یک درخت عمیق فقط یک گره برگ (leaf node) را تغییر می‌دهد، virtual DOM می‌تواند بخش‌های بزرگی را به طور خودکار نادیده بگیرد. به‌روزرسانی‌های مستقیم، کامپایلر را مجبور می‌کنند تا وصله‌های (patches) دقیقی برای هر تغییر احتمالی تولید کند که می‌تواند در موارد خاص، اندازه کد را افزایش دهد.
  • ابزارها و اکوسیستم – بسیاری از پلاگین‌های Vue، ابزارهای توسعه (devtools) و ابزارهای تست به لایه virtual DOM متصل هستند. این ادغام‌ها ممکن است تا زمانی که اکوسیستم خود را به‌روز کند، برای کار با کامپوننت‌های Vapor Mode نیاز به آپدیت داشته باشند.

آنچه باید در ادامه زیر نظر داشت

  • انتشار نسخه پایدار – Vue 3.6 در وضعیت release-candidate قرار دارد. تیم توسعه قصد دارد پاییز امسال نسخه پایدار نهایی را عرضه کند. کاربران اولیه بهتر است قبل از استفاده در کدهای عملیاتی (production)، منتظر آن نسخه بمانند.
  • مسیر مهاجرت – پروژه‌های موجود Vue می‌توانند Vapor Mode را به صورت کامپوننت به کامپوننت فعال کنند.
  • ابزارهای سنجش عملکرد – بنچمارک‌هایی که نسخه‌های ساخته شده با virtual DOM و Vapor Mode را در اپلیکیشن‌های واقعی مقایسه می‌کنند، به تیم‌ها کمک می‌کنند تا تصمیم بگیرند آیا این موازنه ارزشش را دارد یا خیر.

خلاصه کلام

Vapor Mode به توسعه‌دهندگان Vue بهترینِ هر دو جهان را ارائه می‌دهد: نحو declaritive که عاشق آن هستند و سرعت بالای به‌روزرسانی‌های دستی DOM. این قابلیت برای اپلیکیشن‌هایی که بخش‌های بزرگی از UI را چندین بار در ثانیه به‌روزرسانی می‌کنند و همچنین برای پروژه‌هایی که در آن‌ها هر کیلوبایت اهمیت دارد، بسیار کارآمد است. برای رابط‌های کاربری با ترافیک پایین، virtual DOM سنتی همچنان انتخابی کاملاً عملی و ساده‌تر باقی می‌ماند. با انتقال این قابلیت از مرحله release candidate به نسخه stable، جامعه Vue باید میان صرفه‌جویی در حجم باندل (bundle-size) در مقابل میزان آمادگی اکوسیستم و پروفایل عملکردیِ خاصِ اپلیکیشن‌های خود، تعادل برقرار کند.