Composition API (Composition API)
«کامپوزیشن API» روشی تازه برای ساخت برنامه های Vue است. این روش به جای ساختار «آپشنز API»، از توابع واردشده استفاده می کند. «ری اکتیو (Reactive)» یعنی مقدار عوض شود و نما خودکار به روز شود. الان خیلی ساده و مدرسه ای جلو می رویم.
کامپوزیشن API چیست؟
در کامپوزیشن API، منطق را با توابعی مثل ref و computed می نویسیم. سپس با <script setup> مستقیم در <template> استفاده می کنیم. این روش آزادی بیشتری می دهد، ولی کمی عمیق تر است.
نمونه کامپوزیشن API با <script setup>
<template>
<h1>Example</h1>
<img src="/img_typewriter.jpeg" alt="Typewriter">
<p>Typewriters left in storage: {{ typeWriters }}</p>
<button @click="remove">Remove one</button>
<p style="font-style: italic;">"{{ storageComment }}"</p>
</template>
<script setup>
import { ref, computed } from 'vue';
const typeWriters = ref(10);
function remove() {
if (typeWriters.value > 0) {
typeWriters.value--;
}
}
const storageComment = computed(function() {
if (typeWriters.value > 5) {
return "Many left";
}
else if (typeWriters.value > 0) {
return "Very few left";
}
else {
return "No typewriters left";
}
});
<\/script>
نکته: <script setup> نوشتن متغیر و تابع را کوتاه می کند. بنابراین، متغیرها مستقیماً در <template> در دسترس هستند.
مقایسه با Options API
در «آپشنز API»، داده ها، متدها و محاسبه شده ها جدا هستند. این ساختار برای شروع دوستانه تر است. اما آزادی ترکیب منطق در کامپوزیشن API بیشتر است.
همان مثال با Options API
<template>
<h1>Example</h1>
<img src="/img_typewriter.jpeg" alt="Typewriter">
<p>Typewriters left in storage: {{ typeWriters }}</p>
<button @click="remove">Remove one</button>
<p style="font-style: italic;">"{{ storageComment }}"</p>
</template>
<script>
export default {
data() {
return {
typeWriters: 10
};
},
methods: {
remove() {
if (this.typeWriters > 0) {
this.typeWriters--;
}
}
},
computed: {
storageComment() {
if (this.typeWriters > 5) {
return "Many left";
}
else if (this.typeWriters > 0) {
return "Very few left";
}
else {
return "No typewriters left";
}
}
}
};
<\/script>
گام های عملی برای شروع
- یک فایل با
<script setup>بساز. - توابع لازم مثل
refوcomputedرا وارد کن. - متغیر ری اکتیو بساز و در قالب نمایش بده.
هشدار: حتماً نام ها را دقیق بنویس. اشتباه های کوچک، رفتار را عوض می کنند.
جمع بندی سریع
- کامپوزیشن API آزادی ترکیب منطق می دهد.
<script setup>کدنویسی را کوتاه تر می کند.refمتغیر ری اکتیو می سازد.computedمقدار وابسته را محاسبه می کند.
بیشتر بخوان: بیلد (Build) | کامپوزیشن API