Goodbye Options API, Hello Script Setup! روش نه چندان جدید برنامه نویسی در Vue 3

تنظیم اسکریپت روش مختصرتری برای استفاده از Composition API در اجزای فایل منفرد (SFCs) ارائه می دهد.

در نسخه 3، Vue یک سیستم جدید برای سازماندهی کد مؤلفه به نام «Composition API» معرفی کرد. این API جایگزینی برای “Options API” است که سیستم اصلی سازماندهی کد در Vue بود.

تفاوت اساسی بین این دو API در نحوه سازماندهی و دسترسی به بخش های مختلف مولفه Vue نهفته است.

Options API

هنگامی که یک مؤلفه را با استفاده از Options API تعریف می کنید، این کار را با ارائه یک شی با گزینه های از پیش تعریف شده مختلف انجام می دهید.

این گزینه ها (در میان سایر موارد) عبارتند از: داده ها، روش ها، محاسبه شده، ساعت، قطعات، اجزا و غیره. هر یک از این گزینه ها هدف خاصی را دنبال می کند و بخشی از عملکرد جزء را مشخص می کند. گزینه های بسیار بیشتری وجود دارد (نصب شده، ایجاد شده، قبل از تخریب و غیره)، از این رو نام آن (من فکر می کنم).

export default {
  data() {
    return {
      message: '¡Hola, Vue!'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
}

Composition API

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

در تابع راه اندازی، می توانید تمام جنبه های جزء خود را تعریف کنید: داده های واکنشی، توابع، ناظران و غیره. این به شما امکان می دهد تا منطق مرتبط را به جای تجزیه بر اساس ویژگی گروه بندی کنید.

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('¡Hola, Vue!');

    const sayHello = () => {
      console.log(message.value);
    }

    return {
      message,
      sayHello
    }
  }
}

تفاوت

تفاوت های اصلی این دو API عبارتند از:

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

2. استفاده مجدد از کد: Composition API استفاده مجدد از کد و منطق بین اجزا را آسان می کند.

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

Vue 3 هنوز به طور کامل از Options API پشتیبانی می کند، بنابراین در صورت تمایل می توانید به استفاده از آن ادامه دهید.

تنظیم اسکریپت

ویژگی جدیدی است که در Vue 3.2 معرفی شده است که روش مختصرتری برای استفاده از Composition API در اجزای فایل منفرد (SFC) ارائه می‌کند.

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

const message = ref('¡Hola, Vue!');

const sayHello = () => {
  console.log(message.value);
}
</script>