کاربرد Composition API جدید در Vue – از صفر تا صد

۴۱۵
۱۴۰۲/۰۶/۱۴
۲ دقیقه
PDF
کاربرد Composition API جدید در Vue – از صفر تا صدکاربرد Composition API جدید در Vue – از صفر تا صد
آموزش متنی جامع
امکان دانلود نسخه PDF

در این مقاله با بهره‌گیری از API جدید Composition یک پروژه Vue2.x راه‌اندازی کرده و یک اپلیکیشن ToDo می‌سازیم. Composition API یکی از جدیدترین قابلیت‌های نسخه جدید Vue محسوب می‌شود که بحث‌های زیادی را نیز برانگیخته است. در واقع Composition API یک رویکرد کاملاً جدید برای ایجاد قابلیت استفاده مجدد از منطق و سازمان‌دهی کدبیس به حساب می‌آید.

997696

آغاز کار با Composition API

ما از Composition API درون یک پروژه Vue2.x با کمک گرفتن از یک پلاگین موجود استفاده می‌کنیم.

ابتدا باید App خود را با استفاده از Vue CLI بسازیم:

vue create composition-todo

سپس باید پلاگین را از خط فرمان نصب کنیم:

yarn add @vue/composition-api

پلاگین را از فایل main.js با کد زیر مقداردهی می‌کنیم:

این تنها کاری است که برای آغاز کار با این API نیاز داشتیم. در ادامه به توضیح روش استفاده از reactive ،ref ،computed ،‌Vue lifecycle و موارد دیگر خواهیم پرداخت. در ادامه کامپوننت جدید خود را درون فایل app.vue که به صورت واکشی از API ایمپورت می‌شود، خواهیم ساخت و کد زیر را می‌نویسیم:

اگر به کد فوق دقت کنید، می‌بینید که یک تابع راه‌اندازی نوشته شده و مشخصات داده‌های واکنشی تنظیم و مقدار آن بازگشت یافته است. به کمک API می‌توانیم ساختاری بسیار خواناتر و با قابلیت استفاده مجدد بنویسیم که بسیار متفاوت از ساختار موجود قبلی Options API است. اینک کد خود را می‌توانیم به ماژول‌های کوچک تقسیم کنیم.

Composition API

مقایسه با Options API

اینک منطق را به بخش‌های مختلف تقسیم می‌کنیم. تغییرهای مورد نظرمان را طوری انجام می‌دهیم که سازمان‌دهی بیشتری ایجاد شود.

اینک می‌بینید که تغییرهای بیشتری در کد ایجاد شده است. بدین ترتیب می‌توانیم روش تمیزتری برای نوشتن کد داشته باشیم که برای افزایش سازمان‌دهی و ماژوله‌سازی کد مفید است به طور مشابه می‌توانیم از قابلیت‌های دیگر ارائه شده از سوی composition API مانند props ،watchers ،‌context و قلاب‌های چرخه عمری نیز استفاده کنیم.

سخن پایانی

در این راهنما با روش بهبود کد آشنا شدیم، اما هدف از این مقاله ارائه نمونه عملی از اهمیت جداسازی کد است. بدین ترتیب دیگر لزومی ندارد که بدانیم کدام داده‌ها یا مشخصه‌ها یا متدها به کدام کامپوننت تعلق دارند، کافی است آن‌ها را گروه‌بندی کنیم تا خواناتر، با قابلیت استفاده مجدد بیشتر و ماژولارتر شوند.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر پرسشی درباره این مطلب دارید، آن را با ما مطرح کنید.
منابع:
javascript-in-plain-english
PDF
مطالب مرتبط
نظر شما چیست؟

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