مهاجرت به Vue 3 Composition API برای توسعه بهتر کامپوننت

با نحوه انتقال از Options API به Composition API در Vue 3 آشنا شوید.

از آنجایی که سازندگان Vue اعلام کرده اند که Vue 2 تا 31 دسامبر 2023 به پایان می رسد، توسعه دهندگان تشویق می شوند که به Vue 3 تغییر مکان دهند.

با این انتقال، Composition API ارائه می‌شود، ویژگی که رویکردی ماژولار، اعلامی و امن‌تر برای ساخت برنامه‌های Vue ارائه می‌دهد.

Composition API چیست؟

Composition API نشان دهنده یک تغییر پارادایم در نوشتن اجزای Vue از شی Options است. این سبک توسعه یک رویکرد اعلامی تر را اتخاذ می کند و به شما این امکان را می دهد که روی ساخت برنامه Vue خود تمرکز کنید و در عین حال جزئیات پیاده سازی را انتزاع کنید.

انگیزه برای Composition API

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

رویکرد شیء سنتی گزینه‌ها اغلب به بسیاری از ویژگی‌های مؤلفه منجر می‌شود و درک و نگهداری کد را به چالش می‌کشد.

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

مزایای Composition API

Composition API چندین مزیت نسبت به Options API دارد.

1. بهبود عملکرد

Vue 3 مکانیسم رندر جدیدی به نام سیستم واکنش‌پذیری مبتنی بر پروکسی را معرفی می‌کند. این سیستم با کاهش مصرف حافظه و بهبود واکنش پذیری عملکرد بهتری را ارائه می دهد. سیستم واکنش‌پذیری جدید Vue 3 را قادر می‌سازد تا درخت‌های اجزای غول‌پیکر بیشتری را به طور کارآمدتر مدیریت کند.

2. اندازه بسته نرم افزاری کوچکتر

به لطف پایگاه کد بهینه شده و پشتیبانی از لرزش درخت، Vue 3 دارای اندازه باندل کوچک‌تری نسبت به Vue 2 است. این کاهش اندازه بسته‌ها منجر به زمان بارگذاری سریع‌تر و بهبود عملکرد می‌شود.

3. بهبود سازمان کد

با استفاده از Composition API، می توانید کد جزء خود را در توابع کوچکتر و قابل استفاده مجدد سازماندهی کنید. این امر باعث درک بهتر و نگهداری بهتر، به ویژه برای اجزای بزرگ و پیچیده می شود.

4. قابلیت استفاده مجدد از اجزا و توابع

توابع ترکیب را می توان به راحتی در اجزای مختلف مورد استفاده مجدد قرار داد، به اشتراک گذاری کد و ایجاد کتابخانه ای از توابع قابل استفاده مجدد را تسهیل می کند.

5. پشتیبانی بهتر از TypeScript

Composition API پشتیبانی جامع تری از TypeScript را فراهم می کند، استنتاج نوع دقیق تر و شناسایی آسان تر خطاهای مربوط به نوع را در طول توسعه امکان پذیر می کند.

مقایسه بین Object گزینه ها و Composition API

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

داده های واکنشی در Vue 3

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

Vue 2 سیستم واکنشی خود را بر اساس روش Object.defineProperty قرار داد و بر یک آبجکت داده ای متکی بود که حاوی تمام ویژگی های واکنشی است.

هنگامی که یک ویژگی داده را با گزینه داده در مولفه Vue تعریف می‌کنید، Vue به طور خودکار هر ویژگی را در شی داده با گیرنده‌ها و تنظیم‌کننده‌ها، یک ویژگی جدید ECMA Script (ES6) قرار می‌دهد.

این دریافت‌کننده‌ها و تنظیم‌کننده‌ها وابستگی‌های بین ویژگی‌ها را ردیابی می‌کردند و هنگامی که هر ویژگی را تغییر می‌دادید، UI را به‌روزرسانی می‌کردند.

در اینجا نمونه ای از نحوه ایجاد داده های واکنشی در Vue 2 با شی Options آورده شده است:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },

  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

بلوک کد نحوه ایجاد متغیرها در Vue 2 را نشان می دهد. Vue متغیرهای تعریف شده در شی داده را به طور خودکار واکنش پذیر می کند. تغییراتی که در یک ویژگی داده (شمارش) ایجاد می‌کنید باعث به‌روزرسانی در رابط کاربری برنامه شما می‌شود.

علاوه بر این، از شی متدها برای تعریف توابع جاوا اسکریپت مورد استفاده در کامپوننت استفاده کردید. در این مثال، قطعه متد ()increment را تعریف می‌کند که مقدار متغیر count را 1 افزایش می‌دهد.

هنگام نوشتن توابع به عنوان متد در Vue 2، باید از این کلمه کلیدی (this.count++) نیز استفاده کنید. کلمه کلیدی this به شما امکان می دهد به متغیرهای موجود در شی داده اشاره کنید. حذف این کلمه کلیدی باعث ایجاد خطا در هنگام نصب کامپوننت توسط Vue می شود.

سیستم واکنش‌پذیری مبتنی بر پروکسی Vue 3 از پراکسی‌های جاوا اسکریپت برای دستیابی به واکنش‌پذیری استفاده می‌کند، که بهبود عملکرد قابل توجهی را ارائه می‌دهد و مدیریت بهتر وابستگی‌های واکنشی را ارائه می‌دهد.

شما از توابع ref یا reactive برای تعریف داده های واکنشی در Vue 3 استفاده می کنید. تابع ref یک مرجع واکنشی منفرد به یک مقدار ایجاد می کند، در حالی که تابع واکنشی یک شی واکنشی حاوی چندین ویژگی ایجاد می کند.

در اینجا مثالی از نحوه ایجاد داده های واکنشی با تابع ref در Vue 3 آورده شده است:

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

برای استفاده از تابع ref() در Vue 3، ابتدا باید آن را از بسته vue وارد کنید. تابع ref() ارجاعات واکنشی به متغیرها ایجاد می کند.

مثال بلوک کد متغیر count را با تابع ref() ایجاد می کند و مقدار اولیه آن را 0 می کند. تابع ref() یک شی را با ویژگی مقدار برمی گرداند. این ویژگی مقدار، مقدار واقعی شمارش را نگه می‌دارد.

دستور @click برای مدیریت رویدادهای کلیک در Vue استفاده می شود.

شما توابع مورد نیاز در جزء خود را در بلوک تنظیم اسکریپت تعریف می کنید. Vue 3 سینتکس متدهای تعریف توابع در Vue 2 را با توابع معمولی جاوا اسکریپت جایگزین کرد.

اکنون می توانید با پیوست کردن یک متد مقدار به نام متغیر، به متغیرهای واکنشی که با تابع ref() تعریف کرده اید دسترسی داشته باشید. به عنوان مثال، بلوک کد از count.value برای اشاره به مقدار متغیر count استفاده می کند.

تابع محاسبه شده در Vue 3

تابع Computed یکی دیگر از ویژگی های Vue است که به شما امکان می دهد مقادیر مشتق شده را بر اساس داده های واکنشی تعریف کنید. ویژگی های محاسبه شده هر زمان که وابستگی های آنها تغییر کند به طور خودکار به روز می شوند و اطمینان حاصل می شود که مقدار مشتق شده همیشه به روز است.

در Vue 2، رفتار محاسبه شده را با گزینه محاسبه شده در یک جزء تعریف می کنید. در اینجا یک مثال است:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  }
};
</script>

در مثال بالا، ویژگی doubleCount محاسبه شده به ویژگی count data بستگی دارد. هر زمان که ویژگی count تغییر کند، Vue ویژگی doubleCount را دوباره محاسبه می کند.

در Vue 3، Composition API روش جدیدی را برای تعریف ویژگی های محاسبه شده با استفاده از تابع محاسبه شده معرفی می کند. در اینجا به نظر می رسد:

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

const incrementCount = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

قبل از اینکه بتوانید از تابع استفاده کنید، باید تابع محاسبه شده را از بسته vue وارد کنید.

شما در بلوک کد بالا با تابع محاسبه شده یک رج محاسبه شده doubleCount تعریف کرده اید. Vue 3 به ویژگی های محاسبه شده به عنوان ref های محاسبه شده اشاره می کند، که اتکای آنها به متغیرهای واکنشی را برجسته می کند.

تابع محاسبه شده یک تابع getter را به عنوان آرگومان می گیرد که مقدار مشتق شده را بر اساس داده های واکنشی محاسبه می کند. در این حالت، ref محاسبه‌شده doubleCount، ضرب متغیر راکتیو count را در 2 برمی‌گرداند.

توجه داشته باشید که بلوک‌های کد مبتنی بر Composition API خواناتر و مختصرتر از آنهایی هستند که با شی Options نوشته شده‌اند.

آموزش ایجاد دستورالعمل های سفارشی در Vue

Vue 3 Composition API یک رویکرد قدرتمند و انعطاف پذیر برای سازماندهی و استفاده مجدد از کد در اجزای Vue ارائه می دهد. با Composition API می توانید برنامه های Vue ماژولار و قابل نگهداری بیشتری بسازید.

Vue همچنین ویژگی های اضافی را برای به حداکثر رساندن بهره وری در حین توسعه برنامه های وب ارائه می دهد. می توانید یاد بگیرید که دستورالعمل های سفارشی برای استفاده مجدد از عملکردهای خاص در بخش های مختلف برنامه Vue ایجاد کنید.

منبع مقاله