روش های استفاده از 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
- ابزارهای تست
برنامه های تک صفحه ای (SPAs) به طور معمول نیاز به 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 اساساً برای ساخت برنامه های وب طراحی شده است، اما به هیچ وجه فقط به مرورگر محدود نمی شود. شما می توانید: