آشنایی با سبک های API در Vue.js

Vue یک فریمورک جاوا اسکریپت برای ساخت رابط کاربری است. این برنامه بر روی HTML، CSS و جاوا اسکریپت استاندارد ساخته شده است و یک مدل برنامه نویسی مبتنی بر مؤلفه ارائه می کند که به شما کمک می کند رابط های کاربری با هر پیچیدگی را به طور مؤثر توسعه دهید.
اجزای Vue را می توان در دو سبک API ایجاد کرد: Options API و Composition API (معرفی شده در نسخه 2.6)، هر دو رویکرد دارای مزایا و معایب منحصر به فرد خود هستند، و انتخاب مناسب برای پروژه شما می تواند یک تصمیم دشوار باشد.

بیایید عمیقاً در هر دو سبک درک غوطه ور شویم

Options API:
Options API روش سنتی ساخت اجزای Vue است. رفتار و وضعیت یک جزء را با استفاده از مجموعه‌ای از گزینه‌ها مانند داده‌ها، روش‌ها و ویژگی‌های محاسبه‌شده تعریف می‌کند.
data(): این تابع یک شی حاوی ویژگی های داده واکنشی مؤلفه را برمی گرداند. این ویژگی ها زمانی که مقادیر آنها تغییر کند، خروجی رندر شده مولفه را به روز می کند.
متدها (): این تابع یک شی حاوی متدها (توابع) را برمی گرداند که می توانند در قالب کامپوننت یا سایر متدها استفاده شوند. این روش ها می توانند داده ها را دستکاری کنند یا اقداماتی را انجام دهند.
خصوصیات محاسبه شده: این توابع یک مقدار را بر اساس داده های مؤلفه برمی گردانند. هر زمان که هر یک از وابستگی های آنها (ویژگی های داده واکنشی) تغییر کند، مجدداً محاسبه می شوند.
یکی از مزایای اصلی Options API این است که ساده و قابل درک است. از یک الگوی واضح و اعلامی پیروی می کند که برای بسیاری از توسعه دهندگان آشناست و در مستندات Vue به خوبی مستند شده است. این باعث می شود برای مبتدیانی که به تازگی با Vue شروع کرده اند، انتخاب خوبی باشد.

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

بیایید مثالی از استایل API Options را ببینیم:

1. Composition API:

Composition API مجموعه ای از ابزارهای معرفی شده در Vue 3 (و برای Vue 2 از طریق یک افزونه در دسترس است) است که روشی جایگزین برای نوشتن منطق مؤلفه در مقایسه با Options API سنتی ارائه می دهد. بر روی ترکیب توابع قابل استفاده مجدد برای مدیریت وضعیت و رفتار یک جزء تمرکز دارد.
با Composition API، منطق یک جزء را با استفاده از توابع API وارد شده تعریف می کنیم. همچنین به توسعه دهندگان اجازه می دهد تا از قدرت کامل جاوا اسکریپت برای تعریف رفتار مولفه استفاده کنند.
Composition API معمولاً با استفاده می شود. ویژگی setup اشاره‌ای است که Vue را وادار می‌کند تا تبدیل‌های زمان کامپایل را انجام دهد که به ما امکان می‌دهد از Composition API با دیگ بخار کمتری استفاده کنیم.
اساس Composition API سیستم واکنش‌پذیری داخلی Vue است. عملکردهایی مانند ref و reactive داده‌های واکنشی ایجاد می‌کنند که به‌طور خودکار مؤلفه را با تغییر به‌روزرسانی می‌کنند. این امر مدیریت حالت را در مقایسه با راه‌اندازی دستی گیرنده‌ها و تنظیم‌کننده‌ها در Options API ساده می‌کند.
Composition API از تزریق وابستگی از طریق توابعی مانند ارائه و تزریق پشتیبانی می کند.
Composition API به ویژه برای موارد زیر مفید است:

ساخت اجزای پیچیده و قابل استفاده مجدد
پروژه هایی که سازماندهی کد و قابلیت نگهداری را در اولویت قرار می دهند
برنامه هایی که از TypeScript برای ایمنی نوع استفاده می کنند
Composition API ممکن است بهترین گزینه برای استفاده به نظر برسد. با این حال، Composition API بدون اشکال نیست. یک مسئله این است که یادگیری آن برای توسعه دهندگانی که با برنامه نویسی کاربردی و واکنشی آشنا نیستند دشوارتر است.
مسئله دیگر این است که Composition API به طور پیش فرض با Vue 2.6 و کمتر سازگار نیست. این بدان معناست که باید یا به Vue 3.0 ارتقا دهید یا Composition API را از طریق یک افزونه وارد کنید.

بیایید مثالی از استایل API Composition را ببینیم:

<template>
  <div>
    <h4>{{ name }}'s To Do List</h4>
    <div>
      <input v-model="newItemText" v-on:keyup.enter="addNewTodo" />
      <button v-on:click="addNewTodo">Add</button>
      <button v-on:click="removeTodo">Remove</button>
    </div>
    <ul>
      <li v-for="task in tasks" v-bind:key="task">{{ task }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('John');
    const tasks = ref(['Buy groceries', 'Clean the house']);
    const newItemText = ref('');

    const addNewTodo = () => {
      if (newItemText.value !== '') {
        tasks.value.push(newItemText.value);
        newItemText.value="";
      }
    };

    const removeTodo = (index) => {
      tasks.value.splice(index, 1);
    };

    return { name, tasks, newItemText, addNewTodo, removeTodo };
  },
};
</script>

در اینجا ما ref را از Vue وارد می کنیم تا داده های واکنشی ایجاد کنیم. تابع setup جایگزین گزینه های داده و روش از Options API می شود. ما ارجاعات واکنشی را برای نام، وظایف و newItemText با استفاده از ref ایجاد می‌کنیم. توابع addNewTodo و removeTodo در تنظیمات تعریف شده‌اند و تغییرات حالت را مدیریت می‌کنند. تابع setup یک شی حاوی داده ها و توابع واکنشی را برمی گرداند و آنها را در قالب قابل دسترسی می کند.

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

مرجع:
Vue.js
سبک‌های API گزینه‌ها و ترکیب‌ها