Composition API و Options API

سلام دوستان. امیدوارم که حال دلتون تو این روزای گرم تابستونی خوب باشه. امروز میخوام یافته های خودم رو در مورد Composition API با شما به اشتراک بزارم:

خب اول از این شروع کنیم که اصلا Composition API چی هست؟

شاید بهتره قبل از اون یه معرفی کوتاهی از Options API داشته باشیم. Options API در واقع سبک کد نویسی در vue 2 بود که هر چیزی جای خودشو داشت مثلا متغیر ها داخل data توابع داخل methods و ... .

خب تا اینجا همه چیز اوکی بود و یه کد منسجم داشتیم اما مشکل کجا ایجاد میشد؟

دقیقا وقتی پیچیدگی یک کامپوننت از حدی فراتر میرفت و اون موقع بود که مدیریت فرایند ها داخل اون کامپوننت مشکل میشد . مثلا اگر یک کامپوننتی مسئول بار‌گذاری عکس ، ویرایش عکس ، تغییر نام پروفایل و ... بود و میخواستیم یه قسمتی از کدمون رو ویرایش کنیم ، مدام باید برمیگشتیم به تابع data متغییرمون رو چک میکردیم بعد داخل methods توابعمون رو چک میکردیم و این عملا در پروژه های بزرگ مشکل ساز میشد چون اسکرول مداوم کلافمون میکرد.

حالا فکر کنید قسمت کد مربوط به بار‌گذاری عکس رو میخواستیم داخل یک کامپوننت دیگه استفاده کنیم .خب منطقا راه تمیز تر استفاده از mixin ها بود که قطعه کد مربوط به بار‌گذاری عکس رو به یک mixin منتقل میکردیم تا هر جایی که میخوایم از اون استفاده کنیم. اما خب چالش چیه؟

اول اینکه اگر داخل یک کامپوننت چند تا mixin داشتیم سخت بود بررسی کنیم کدوم پراپرتی توسط کدوم mixin داره تزریق میشه از طرفی ممکن بود پراپرتی های داخل چند mixin نام های یکسانی داشته باشن و این تداخل ایجاد کنه و همه چیزو بهم بریزه .

و اما مشکل سوم هم این بود که ما گاهی نیاز داشتیم mixin هامون با هم تعامل داشته باشن و هر دو تا بخوان به یه پراپرتی مشترک دسترسی داشته باشن که خود این برای ما ایجاد مشکل میکرد به همین دلایل بود که اومدن گفتن در vue 3 استفاده از mixin ها اصلا توصیه نمیشه.

خب حالا دو تا مشکل اساسی داریم : یکی مشکلات مدیریت کامپوننت ها در سبک Options API و دیگری هم مشکلات mixin ها

اما خب مشکل بعدیمون اینه خیلی از توسعه دهندگان ویو تمایل دارن از تایپ اسکریپت استفاده کن اما Options API بدون در نظر گرفتن type inference طراحی شده بود و عملا شما نیازی به مشخص کردن نوع متغیر ها و ... نداشتید و این توسعه دهندگان رو مجبور میکرد برای استفاده از تایپ اسکریپت از راه های پیچیده و غیر منطقی استفاده کنن و حتی با همه ی این راه ها هم باز ممکن به به شکست بخورن.

حالا سه تا مشکل داریم اما راه حل چیه؟

یک وجه تمایز بزرگ vue 2 و vue 3 همین Composition API هست که این مشکلات رو حل میکنه . در واقع Composition API مجموعه ای از api هاست که به ما این امکان رو میده به جای تعریف اپشن ها از ایمپورت کردن توابع استفاده کنیم .

حالا مزیت هاش نسبت به Options API چیه؟

اول اینکه به شما اجازه میده به صورت تمیز و بهینه کدتون رو در کامپوننت های مختلف استفاده کنید.

از طرفی یک کد انعطاف پذیر بهتون میده که هر تابعی کنار متغییر هاش و ... تعریف میشه و عملا وقتی پیچیدگی کامپوننتون زیاد میشه مشکل مدیریتی ندارید.

مزیت سومش اینه که راحت میتونید از تایپ اسکریپت استفاده کنید بدون مشکل های قبلی و اما مزیت اخرش هم باندل پروداکشن کوچک‌تر هست.

خب حالا سوال اینه که از کدوم استفاده کنیم Composition API یا Options API ؟

خب دیگه این به خودتون بستگی داره که با کدوم بیشتر راحتید چون Options API قرار نیست منسوخ بشه .اما خب توصیه ی کلی اینه برای پروژه های مقیاس بزرگ از Composition API استفاده کنید تا مزایای فراوانش رو ببینید. البته میتونید از هر دو هم در یک پروژه استفاده کنید که اینکار خیلی توصیه نمیشه.


اگر خواستید میتونید نمونه کد های Composition API و Options API رو اینجا ببینید و مقایسه کنید.

Options API:
https://github.com/vuejs/vue-cli/blob/a09407dd5b9f18ace7501ddb603b95e31d6d93c0/packages/@vue/cli-ui/src/components/folder/FolderExplorer.vue#L198-L404
Composition API:
https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e