Vue ۳.۶ و Vapor Mode؛ خداحافظی با Virtual DOM؟

Vapor Mode یک حالت کامپایل جدید و اختیاری در Vue ۳.۶ است که کامپوننت‌ها را بدون Virtual DOM اجرا می‌کند: قالب کامپوننت مستقیماً به دستورهای DOM کامپایل می‌شود و با تغییر داده، فقط همان گره‌ای که به آن داده وابسته است به‌روز می‌شود. Vapor Mode کاملاً opt-in است، فقط با <script setup> یا کامپوننت‌های فقط‌قالب کار می‌کند و Options API را پشتیبانی نمی‌کند؛ بنابراین «خداحافظی کامل با Virtual DOM» نیست، بلکه امکان کنار گذاشتن آن در بخش‌هایی است که سود دارد.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

وضعیت تا آبان ۱۴۰۵: Vue ۳.۶ هنوز در مرحله Release Candidate است. طبق صفحه انتشارهای مخزن رسمی vuejs/core، آخرین نسخه آزمایشی v3.۶.۰-rc.۱۳ (۲۳ اکتبر ۲۰۲۶) و آخرین نسخه پایدار v3.۵.۴۴ (۱۳ اکتبر ۲۰۲۶) است. یادداشت ۳.۶.۰-rc.۱ (۱۸ ژوئیه ۲۰۲۶) اعلام کرده که Vapor Mode در RC از نظر قابلیت کامل است. تاریخ انتشار پایدار ۳.۶ رسماً اعلام نشده است.

در این مقاله توضیح می‌دهیم Vapor Mode چطور کار می‌کند، چه چیزهایی را پشتیبانی نمی‌کند، با Svelte و Solid چه شباهت و تفاوتی دارد و برای پروژه‌های واقعی کی ارزش امتحان کردن دارد.

Vapor Mode در Vue چیست؟

Vapor Mode در Vue یعنی روشی برای کامپایل کامپوننت که به جای ساختن درخت مجازی (Virtual DOM) و مقایسه آن با نسخه قبلی، کد مستقیم دستکاری DOM تولید می‌کند. در Vue معمولی، هر بار که state تغییر می‌کند، تابع render یک درخت VNode جدید می‌سازد و Vue تفاوت آن را با درخت قبلی پیدا می‌کند (diff). در Vapor Mode این مرحله حذف می‌شود و سیستم واکنش‌پذیری (reactivity) مستقیماً گره‌های وابسته را به‌روز می‌کند.

طبق یادداشت تغییرات رسمی Vue در شاخه minor، این حالت «۱۰۰٪ اختیاری» است و زیرمجموعه‌ای از APIهای موجود Vue را با رفتار تقریباً یکسان پشتیبانی می‌کند. نکته مهم این است که سینتکس قالب و Composition API تغییر نمی‌کند؛ همان کامپوننت با افزودن یک کلمه به تگ script به Vapor تبدیل می‌شود.

<!-- ProductPrice.vue : یک کامپوننت Vapor -->
<script setup vapor>
import { ref, computed } from 'vue'

const qty = ref(1)
const price = 250000
const total = computed(() => (qty.value * price).toLocaleString('fa-IR'))
</script>

<template>
  <div dir="rtl" class="price">
    <button @click="qty++">افزودن</button>
    <span>تعداد: {{ qty }}</span>
    <strong>جمع: {{ total }} تومان</strong>
  </div>
</template>

در این مثال تنها تفاوت با یک کامپوننت معمولی، کلمه vapor در <script setup vapor> است. طبق یادداشت رسمی، <script vapor> هم شکل کوتاه همین دستور است.

Vue ۳.۶ به جز Vapor Mode چه تغییری دارد؟

Vue ۳.۶ علاوه بر Vapor Mode، یک بازنویسی بزرگ در پکیج @vue/reactivity بر پایه کتابخانه alien-signals دارد. یادداشت رسمی می‌گوید این بازنویسی کارایی و مصرف حافظه سیستم واکنش‌پذیری را به‌طور قابل توجهی بهبود می‌دهد. این بهبود برخلاف Vapor Mode اختیاری نیست و به همه برنامه‌های Vue ۳.۶، حتی آن‌هایی که از Virtual DOM استفاده می‌کنند، می‌رسد.

تغییر	اختیاری یا خودکار	اثر
Vapor Mode	اختیاری، برای هر کامپوننت	حذف Virtual DOM در کامپوننت‌های انتخاب‌شده
createVaporApp()	اختیاری، برای کل اپ	حذف runtime مربوط به Virtual DOM از باندل
vaporInteropPlugin	اختیاری	استفاده هم‌زمان از کامپوننت‌های Vapor و معمولی
بازنویسی reactivity بر پایه alien-signals	خودکار	بهبود کارایی و حافظه در همه برنامه‌ها
event delegation در Vapor	از rc.۲ اختیاری شد	تغییر ناسازگار برای کسانی که نسخه‌های آلفا را آزمایش می‌کردند

چطور Vapor Mode را در پروژه فعال کنیم؟

Vapor Mode دو مسیر فعال‌سازی دارد: ساخت اپ کاملاً Vapor با createVaporApp()، یا افزودن کامپوننت‌های Vapor به یک اپ موجود با نصب vaporInteropPlugin. یادداشت رسمی توضیح می‌دهد که اپ کاملاً Vapor کد runtime مربوط به Virtual DOM را بارگذاری نمی‌کند و حجم پایه باندل به‌شدت کاهش می‌یابد؛ اما اگر در اپ Vapor بخواهید کامپوننت‌های معمولی هم داشته باشید، با نصب پلاگین interop همان runtime دوباره اضافه می‌شود.

// اپ کاملاً Vapor: بدون بارگذاری runtime مربوط به Virtual DOM
import { createVaporApp } from 'vue'
import App from './App.vue'

createVaporApp(App).mount('#app')

// اپ موجود (Virtual DOM) که چند کامپوننت Vapor دارد
import { createApp, vaporInteropPlugin } from 'vue'
import LegacyApp from './LegacyApp.vue'

createApp(LegacyApp).use(vaporInteropPlugin).mount('#app')

یادداشت ۳.۶.۰-rc.۱ دو سناریو را برای استفاده از Vapor Mode پیشنهاد می‌کند:

• استفاده بخشی در اپ‌های موجود: مثلاً تبدیل صفحه‌ای که لیست طولانی یا به‌روزرسانی‌های پرتکرار دارد.
• ساخت اپ‌های کوچک جدید کاملاً با Vapor: جایی که حجم باندل و سرعت بارگذاری اولیه اهمیت زیادی دارد.

Vapor Mode چه محدودیت‌هایی دارد؟

محدودیت اصلی Vapor Mode این است که هر قابلیتی که به VNode یا proxy نمونه عمومی کامپوننت وابسته باشد، در کامپوننت‌های Vapor در دسترس نیست. طبق یادداشت رسمی، موارد زیر در Vapor پشتیبانی نمی‌شوند یا کاربرد ندارند:

• Options API؛ فقط <script setup> و کامپوننت‌های فقط‌قالب پشتیبانی می‌شوند.
• app.config.globalProperties.
• دستور v-memo.
• getCurrentInstance() که در کامپوننت Vapor مقدار null برمی‌گرداند.

معنای عملی: کتابخانه‌های UI یا پلاگین‌هایی که به getCurrentInstance() یا globalProperties تکیه می‌کنند، ممکن است داخل کامپوننت Vapor درست کار نکنند. همچنین تا زمانی که ۳.۶ پایدار نشده، ابزارها و کتابخانه‌های اکوسیستم ممکن است پشتیبانی کامل نداشته باشند.

نکته: Vapor Mode را با کامپوننت‌های «برگ» (کامپوننت‌هایی که فرزند پیچیده ندارند و از کتابخانه جانبی استفاده نمی‌کنند) شروع کنید؛ ریسک ناسازگاری در آن‌ها کمترین است.

Vapor Mode در مقایسه با Svelte و Solid چطور است؟

Vapor Mode از نظر ایده به Svelte و Solid نزدیک است: هر سه به جای Virtual DOM، به‌روزرسانی ریزدانه (fine-grained) مستقیم روی DOM انجام می‌دهند. یادداشت رسمی Vue می‌گوید Vapor Mode در بنچمارک‌های شخص ثالث به سطح کارایی Solid و Svelte ۵ رسیده است؛ اما نام و روش آن بنچمارک‌ها در آن یادداشت ذکر نشده، پس این ادعا را به‌عنوان اعلام تیم Vue بخوانید، نه نتیجه مستقل.

معیار	Vue 3.6 (Vapor Mode)	Svelte 5	SolidJS
Virtual DOM	اختیاری؛ در کامپوننت Vapor حذف می‌شود	ندارد	ندارد
مدل واکنش‌پذیری	ref و computed بر پایه alien-signals	runeها (مثل $state)	signalها (مثل createSignal)
سینتکس قالب	قالب Vue (SFC)	قالب Svelte	JSX
مهاجرت تدریجی از کد موجود	بله، کامپوننت‌به‌کامپوننت در یک اپ Vue	از Svelte ۴ به ۵ با تغییر سینتکس	مخصوص پروژه‌های Solid
هم‌زیستی با مدل قدیمی	با vaporInteropPlugin	—	—
وضعیت تا آبان ۱۴۰۵	Release Candidate	پایدار	پایدار

مزیت ویژه Vue این است که تیم‌هایی که امروز اپ بزرگ Vue دارند، برای رسیدن به مدل بدون Virtual DOM لازم نیست فریم‌ورک را عوض کنند؛ می‌توانند تدریجی و کامپوننت‌به‌کامپوننت پیش بروند. در مقابل، Svelte و Solid این مدل را از ابتدا و به‌صورت پایدار ارائه می‌دهند.

آیا Vapor Mode پایان Virtual DOM در Vue است؟

خیر؛ Vapor Mode پایان Virtual DOM در Vue نیست. یادداشت رسمی صراحتاً Vapor را اختیاری می‌داند، Options API در آن پشتیبانی نمی‌شود و برای هم‌زیستی دو مدل، پلاگین interop طراحی شده است. با توجه به حجم عظیم کدهای Vue که با Options API و کتابخانه‌های وابسته به Virtual DOM نوشته شده‌اند، دو مدل در آینده قابل پیش‌بینی کنار هم باقی می‌مانند.

بهترین تعبیر این است که Vue حالا یک «حالت کارایی بالا» دارد که می‌توان آن را جایی که لازم است روشن کرد. برای بیشتر سایت‌ها و پنل‌های معمولی، تفاوت محسوسی برای کاربر نهایی ایجاد نمی‌کند؛ سود اصلی در رابط‌های پرداده، لیست‌های بزرگ و دستگاه‌های ضعیف‌تر دیده می‌شود.

Vapor Mode برای کدام پروژه‌ها مناسب‌تر است؟

Vapor Mode بیشترین سود را در پروژه‌هایی دارد که رندر مکرر بخش بزرگی از زمان پردازش مرورگر را می‌گیرد یا حجم اولیه جاوااسکریپت اهمیت زیادی دارد. چند نمونه رایج:

1. داشبوردها و پنل‌های پرداده: جدول‌هایی با صدها ردیف که مقادیرشان مرتب تغییر می‌کند، مثل موجودی انبار یا وضعیت سفارش‌ها.
2. ویجت‌های کوچک قابل جاسازی: ماشین‌حساب قیمت، فرم رزرو یا گفتگوی پشتیبانی که داخل سایت‌های دیگر (از جمله سایت‌های وردپرسی) قرار می‌گیرند و باید سبک باشند.
3. اپ‌های موبایل‌محور: جایی که کاربران با گوشی‌های میان‌رده و اینترنت کند وارد می‌شوند و هر کیلوبایت جاوااسکریپت اهمیت دارد.
4. بخش‌های تعاملی سنگین در اپ موجود: مثل ویرایشگر یا تقویم که می‌توان فقط همان بخش را به Vapor برد.

در مقابل، برای سایت‌های محتوایی، صفحات فرود و فرم‌های ساده، نه Vapor Mode و نه حتی یک فریم‌ورک سنگین جاوااسکریپت لزوماً لازم نیست؛ انتخاب فناوری باید از نیاز واقعی پروژه شروع شود.

محدودیت‌ها: چه زمانی هنوز سراغ Vapor Mode نرویم؟

• در پروژه production حساس، تا انتشار پایدار Vue ۳.۶ صبر کنید؛ نسخه‌های RC هنوز رفع باگ دریافت می‌کنند.
• اگر کد شما عمدتاً با Options API نوشته شده، ابتدا باید به Composition API و <script setup> مهاجرت کنید.
• اگر به کتابخانه UI وابسته‌اید که از getCurrentInstance() یا globalProperties استفاده می‌کند، سازگاری آن را جداگانه بسنجید.
• اگر مشکل کارایی ندارید، تبدیل کامپوننت‌ها به Vapor ارزش ریسک و زمان را ندارد.

از تجربه تیم siloow

تیم siloow بیشتر وب‌اپ‌های خود را با React می‌سازد، اما در پروژه‌هایی مثل وب‌اپ انبار و فروش (POS) با جدول‌های پرداده و به‌روزرسانی مداوم موجودی، با همان مسئله‌ای روبه‌رو بوده‌ایم که Vapor Mode برای حلش ساخته شده: هزینه رندر دوباره بخش‌هایی که تغییر نکرده‌اند. تجربه ما این است که در چنین صفحاتی، انتخاب مدل رندر ریزدانه یا بهینه‌سازی دقیق، روی دستگاه‌های ارزان‌تری که فروشگاه‌ها استفاده می‌کنند تفاوت محسوس ایجاد می‌کند؛ اما در صفحات معمولی مثل فرم‌ها و تنظیمات، تفاوتی دیده نمی‌شود. توصیه ما این است که قبل از تغییر فناوری، با ابزار پروفایلینگ مرورگر بسنجید گلوگاه واقعاً رندر است یا شبکه و داده.

جمع‌بندی

• Vapor Mode حالت اختیاری Vue ۳.۶ برای اجرای کامپوننت بدون Virtual DOM است.
• فعال‌سازی با <script setup vapor>، و برای کل اپ با createVaporApp() انجام می‌شود.
• Options API، v-memo، globalProperties و getCurrentInstance() در Vapor پشتیبانی نمی‌شوند.
• بازنویسی reactivity بر پایه alien-signals به همه برنامه‌های Vue ۳.۶ می‌رسد.
• تا آبان ۱۴۰۵ نسخه ۳.۶ در مرحله RC است؛ برای production حساس منتظر نسخه پایدار بمانید.

اگر برای انتخاب فریم‌ورک فرانت‌اند، بهینه‌سازی کارایی یک وب‌اپ پرداده یا ساخت پنل مدیریتی به مشاوره فنی نیاز دارید، خدمات طراحی و توسعه وب‌اپلیکیشن siloow را ببینید. برای مقایسه با تحولات React، مقاله React 19.3 و برای ساختار حاکمیتی آن، بنیاد ری اکت را بخوانید. برای تصمیم درباره نوع پروژه هم مقاله تفاوت سایت و وب اپلیکیشن را ببینید و خبرهای بعدی را در مگ siloow دنبال کنید.

منابع

• CHANGELOG (minor branch) — vuejs/core on GitHub
• Releases — vuejs/core on GitHub
• Vue.js — The Progressive JavaScript Framework

سوالات متداول درباره Vapor Mode