روش‌های استفاده از Vue
ما معتقدیم نمی‌شود در دنیای وب برای همه یک نسخه تجویز کرد. به همین Vue به گونه‌ای طراحی شده است که انعطاف‌پذیر و سازگار باشد. بسته به مورد استفاده شما Vue می‌تواند به روش‌های مختلفی برای ایجاد تعادل بهینه بین پیچیدگی های اپلیکیشن، تجربه توسعه دهنده و اجرای نهایی استفاده شود.
اسکریپت مستقل
Vue را می‌توان به عنوان یک فایل اسکریپت مستقل استفاده کرد! اگر یک فریمورک بکند دارید که بیشتر HTML را رندر می‌کند، یا منطق اپلیکیشن شما به اندازه کافی پیچیده نیست که به کامپایل یا پیش پردازش احتیاج داشته باشد، این ساده ترین راه برای ادغام Vue در اپلیکیشن شما است. در چنین مواردی می‌توانید Vue را به عنوان جایگزینی بهتر برای jQuery در نظر بگیرید.
Vue همچنین یک جایگزین به نام petite-vue را ارائه می‌دهد که به طور خاص برای بهبود تدریجی HTML بهینه‌سازی شده است. این جایگزین ویژگی‌های کمتری دارد، اما بسیار سبک و شامل پیاده‌سازی کارآمد‌تری در سناریوهای استفاده مستقیم است (no-build-step) است.
کامپوننت‌های وب
می‌توانید از Vue برای ساخت کامپوننت‌های استاندارد وب استفاده کنید که می‌توانند در هر صفحه HTML استفاده شوند، صرف نظر از اینکه چگونه اجرا می‌شوند. این گزینه به شما این امکان را می‌دهد که از Vue به شیوه‌ای کاملاً بهینه استفاده کنید: کامپوننت های وب تولید شده می‌توانند در برنامه‌های قدیمی، صفحات HTML ثابت یا حتی در برنامه‌هایی که با فریمورک‌های دیگر ایجاد شده‌اند، استفاده شوند.
برنامه تک صفحه‌ای (SPA)
برخی از برنامه ها شامل سطح بالایی از تعاملات کاربری و منطق پیچیده در فرانت‌اند هستند. بهترین راه برای ساخت چنین برنامه هایی استفاده از معماری است که در آن Vue نه تنها کل صفحه را کنترل می‌کند، بلکه به‌روزرسانی داده ها و مسیریابی را بدون نیاز به لود مجدد صفحه انجام می‌دهد. این نوع برنامه معمولاً به عنوان یک برنامه تک صفحه ای (SPA) شناخته می‌شود.
Vue کتابخانه های اصلی و پشتیبانی جامع از ابزارهای مورد نیاز را با تجربه فوق‌العاده‌ای برای توسعه‌دهندگان ارائه می‌دهد تا SPAهای مدرن را بسازند، شامل:
- مسیریابی سمت کلاینت
- مجموعه‌ای فوق العاده سریع از ابزارهای مورد نیاز برای کد نویسی
- پشتیبانی IDE
- ابزارهای توسعه در مرورگر
- پشتیبانی از TypeScript
- ابزارهای تست
برنامه های تک صفحه‌ای (SPA) به طور معمول نیاز به API بک اند دارند، اما شما همچنین می‌توانید Vue را با ابزار هایی مانند Inertia.js ترکیب کنید تا مزایای SPA را در یک مدل توسعه سرور محور، داشته باشید.
فول استک / SSR
هنگامی که برنامه به SEO و زمان لود محتوا (TTC) حساس است، SPAها مشکل ساز هستند. این به این دلیل است که مرورگر یک صفحه HTML تا حد زیادی خالی دریافت می‌کند و باید منتظر بماند تا جاوا اسکریپت قبل از رندر کردن هر چیزی، بارگیری شود.
Vue برای حل این مشکل API هایی برای "رندر" کردن برنامه از سمت سرور ارائه می‌دهد. این به سرور اجازه می‌دهد تا HTML از قبل رندر شده را ارسال کند و کاربران می‌توانند در هنگام لود جاوا اسکریپت، محتوا را ببینند. سپس Vue برنامه را در سمت کاربر "تعاملی" می‌کند. این فرآیند به نام رندرینگ سمت سرور (SSR) شناخته می‌شود و به طور چشمگیری باعث بهبود معیارهای اصلی کارایی وب مانند Largest Contentful Paint (LCP) می‌شود.
فریم ورک هایی مبتنی بر Vue ایجاد شده‌اند، به عنوان مثال Nuxt، که به شما این امکان را می‌دهند تا از Vue و JavaScript استفاده کرده و یک برنامه Fullstack را توسعه دهید.
جم-استک / SSG
اگر اطلاعات مورد نیاز ثابت باشند، می‌توان رندر سمت سرور را زودتر انجام داد یعنی صفحات HTML برای یک برنامه را به صورت کامل ایجاد کرد و آنها را به صورت فایل‌های استاتیک ارائه داد. این کار باعث بهبود عملکرد وب‌سایت می‌شود و فرآیند پیاده سازی را ساده‌تر می‌کند. Vue همچنین می‌تواند در این برنامه‌ها تعامل غنی برای کاربر فراهم کند. این تکنیک به عنوان 'تولید سایت استاتیک' یا همان JAMStack شناخته می‌شود.
دو نوع سایت استاتیک وجود دارد: تک‌صفحه‌ای و چند‌صفحه‌ای. هر دو نوع سایت را به صورت HTML استاتیک رندر می‌کنند. تفاوت آنها این است:
سیستم تک صفحه ای پس از لود اولیه، صفحه را به یک برنامه تک صفحه‌ای (SPA) تبدیل می‌کند. که باعث می‌شود بارگذاری اولیه بیشتر طول بکشد، اما در لود های بعدی سرعت بالاتری خواهد داشت، چرا که به جای بارگذاری مجدد کل صفحه تنها نیاز به به‌روزرسانی جزئی محتوای صفحه دارد.
یک سیستم چند صفحه ای هر بار که به بخش دیگری از یک وب سایت می‌روید، یک صفحه کاملاً جدید لود می‌کند. نکته خوب این است که اگر صفحه نیاز به تعامل خاصی نداشته باشد، می‌تواند جاوا اسکریپت بسیار کمی ارسال کند - یا گاهی اوقات اصلا جاوا اسکریپت ارسال نمی‌کند. برخی از سیستم‌های SSG چند صفحه‌ای، مانند Astro، حتی به شما امکان می‌دهند که کامپوننت های Vue در HTML استاتیک اضافه کنید.
اگر انتظار تجربه کاربری بهتر، تعامل‌های کاربری پیچیده تر یا کامپوننت های ثابت در صفحه وب داشته باشید، SSG تک‌صفحه‌ای مناسب‌تر خواهد بود در غیر این صورت استفاده از SSG چند‌صفحه‌ای بهتر است.
تیم Vue همچنین یک ابزار تولید سایت استاتیک به نام VitePress را نیز توسعه می‌دهد، که از آن برای این وب‌سایتی که در حال خواندن آن هستید استفاده می‌شود! VitePress از هر دو نوع از SSG پشتیبانی می‌کند. همچنین، Nuxt نیز از SSG پشتیبانی می‌کند. شما حتی می‌توانید SSR و SSG را برای مسیرهای مختلف در یک برنامه Nuxt ترکیب کنید.
فراتر از وب
اگرچه Vue اساساً برای ساخت برنامه های وب طراحی شده است، اما به هیچ وجه فقط به مرورگر محدود نمی‌شود. شما می‌توانید: