توجه :‌در صورت بروز هر گونه مشکل و سوال فقط و فقط از طریق تلگرام با ما در ارتباط باشید با تشکر تلگرام پشتیبانی

Vuejs 3 و آموزش قابلیت Composition API

vuejs 3

Composition API

شاید به جرات میتونم بگم بزرگترین تغییر Vuejs 3 نسبت به برادر بزرگترش (Vue 2) همین Composition API باشه که تو این مقاله قرار مفصل راجبش حرف بزنیم.

Composition API چیست؟

فقط برای رفع نگرانی ، این API جدید جایگزین سینتکس قبلی Vue 2.x نشده که API Options نام داره ! حتی می توانیم از API Options در Vue 3 استفاده کنیم. Composition API فقط مدلیه که برای رفع محدودیتهای API Options در Vue 2 ایجاد شده. در بخش بعدی این محدودیت ها را بررسی خواهیم کرد .

خیلی ساده بخام واستون بگم با Composition API دیگه نیازی نیس که data  هر رو یه جا  function  ها رو یه جا تعریف کنید با این مدل میتونیم خوانایی کدمون رو بیشتر کنیم مثلا هر data رو کنار function اون تعریف کنیم و اینجوری نظم و خوانایی کد خیلی بالاتر میره البته این فقط یه نمونه کوچیک بود که من گفتم کاریی های فوق العاده دیگه ای هم داره که بهش میپردازیم.

چرا اصلا تغییر ؟!!

حالا شاید واستون سوال پیش بیاد چرا باید با این روش کد بزنم مگه روش قبلی چه مشکلی داشت اینجاست که باید بگم :

۱ توسعه و سازماندهی بهتر

۲ پشتیبانی بهتر از TypeScript

داخل عکس زیر مشاهده میکنید روش کد زنی Composition API و API Options:

compostion api

مقایسه Options API و Composition API:

بهترین راه برای درک تغییرات ، مشاهده عملی اونه:

بیایید یک  Component ساده بسازیم که به کاربر اجازه می دهد با فشار یک دکمه دو عدد اضافه کند. اول ، ما سریع نحوه انجام این کار را با Options API بررسی خواهیم کرد. بعد همون Component را با استفاده از Composition API می سازیم تا تفاوت ها رو ببینید.

ساخت Componet با Options API (روش Vue 2)

چیزایی که برای جمع ۲ تا عدد نیاز داریم (عکس بالا):

Vuejs 3

۳ تا متغیر اولی برای عدد اول ، دومی برای عدد دوم ، و سومی برای نتیجه عملیات جمع
۲ تا InputBox اولی برای عدد اول ، دومی هم برای وارد کردن عدد دوم
و در نهایت یک متد یا همون Function که این دو عدد رو جمع کنه باهم

نحوه انجام این کار در Vue 2 و روش Options API اینجوریه که:

Vuejs

همونطور که تو عکس بالا میبینید data  را گرفته و در داخل متد addNumbers با استفاده از کلمه کلیدی this که اشاره به همین کلاس موجود دارد دو عدد را با هم جمع میکنیم

خب تا اینجا این روشی بود که تا الان استفاده میکریمو هممون بلد بودیم حالا میریم سراغ Vuejs 3 روش Compostion API:

javascript

ابتدا ، توابعی را که باید از آن استفاده کنیم از Composition API در بالا وارد می کنیم. تو این مورد ، این فقط ref است. (البته اگه اگه به روشی که من گفتم تو ویدئو Vue 3 سااخت اواین پروژه باید بجای @vue/composition-api از vue تنها استفاده کنید)

بعد ، توجه کنید که همه چیز الان داخل یک تابع setup () است. هر توابع یا خصوصیاتی که میخواین واسه Vue استفاده کنید باید داخل تابع ()setup استفاده شوند ، برای اینکه اینجوری بازگشت داده میشند Data  ها و توابع و غیره …

در داخل setup () ، متغیرهای reactive که استفاده می کنیم در بالا به عنوان متغیرهای مستقل تعریف می شوند ، در عوض یک شی از داده ها بازگشت داده می شود.

تابع addNumbers () نیز به جای قرار گرفتن در ویژگی متد ، خود به خود nest می شود. اکنون می توانیم به راحتی از توابع خود در همه جای Component استفاده مجدد کنیم ، که به طور قابل توجهی خوانایی در پروژه های بزرگ را بهبود می بخشد. توجه داشته باشید که دیگر برای مراجعه به متغیرها نیازی به این مورد نیست! استفاده از توابع Composition API به جای استفاده از گزینه های  component ها در Vue ، جادویی را که در پشت صحنه اتفاق می افتاد از بین می برد.

 

خب دوستان امیدوارم که تفاوت این دو مدل Vuejs 3 رو بخوبی فهمیده باشید اگه هم متوجه نشدین اشکالی نداره  ویدئویی از این مثال رو اینجا گذاشتم تا تفاوت این دو مدل رو بهتر توضیح بدم تا بهتر متوجه بشین پس با ما همراه باشید.

مطالب مرتبط
5 دقیقه

آموزش SQL برای مبتدی‌ها

سبحان سلیمی

در دنیای فناوری صحبت‌های بسیاری در مورد داده شنیده می‌شود، اما داده خام به خودی خود بسیار سودمند نخواهد بود. SQL (معمولاً مانند کلمه «sequel» تلفظ می‌شود) مخفف «زبان پرسمان تنظیم شده» یا Structured Query Language است. آموزش SQL امکان ارتباط با پایگاه داده برای مدیریت همه‌ی داده‌های موجود را فراهم می‌کند و SQL زبانی […]

csharplearn 5 دقیقه

آموزش گام به گام سی شارپ

سبحان سلیمی

۱.نگاهی به C# C# یک زبان برنامه‌نویسی شی گرا، ساده و مدرن است که توسط شرکت Microsoft عرضه شده است. .NET Foundation این پروژه‌ی متن‌باز (Open Source) را مدیریت می‌کند. C# یک زبان برنامه‌نویسی شی گرا و کامل است که به برنامه‌نویسان این امکان را می‌دهد اپلیکیشن‌هایی کراس‌پلفترم (cross-platform) برای پلتفرم‌های ویندوز، تحت وب و […]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *