همه چیز درباره script setup در Vue 3

بعد از انتشار Composition Api در‌نسخه سوم‌ Vue، سینتکس <script setup> هم راه خودش رو به ویو باز کرد. با وجود این سینتکس، در اکثر مواقع دیگه نیازی‌به کامپوننت آپشن های دیگه نخواهیم داشت.

تمام حرف script setup اینه که کدهای اضافی و wrapper های بیهوده در کامپوننت های قدیمی باید حذف بشه تا بتونیم کامپوننت های ساده تری بنویسیم.

<script>
	import { defineComponent, ref } from 'vue'
	export default defineComponent({
  	setup() {
    	const count = ref(0)
    		function increment() {
      		count.value++
    	}
    	return {
      		count,
      		increment
    	}
  	}
	})
</script>

کد بالا یک کامپوننت ساده است که با استفاده از script setup به صورت زیر ساده سازی میشه

<script setup>
	import { ref } from 'vue'
	const count = ref(0)
	function increment() {
  		count.value++
	}
</script>

همونطور که در کد بالا قابل مشاهده است، با سینتکس <script setup> میتونی منطق کامپوننت ها رو خیلی خلاصه تر بنویسی. حتی دیگه نیازی به return هم نیست. چون تمام متغیرهایی که تعریف میکنی مستقیما در template قابل دسترسی خواهند بود.

همینطور کامپوننت ها و توابع ایمپورت شده هم نیازی به register کردن مجزا ندارن.

<script setup>
import { ref } from 'vue'
import { format } from '@/utils/currency'
import MyComponent from '@/components/MyComponent.vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">{{ format(count) }}</button>
  <MyComponent />
</template>

استفاده از Props و Events

برای استفاده از آپشن های props و emit باید اصطلاحا از یک سری ماکروکامپایلرهایی که به صورت پیش فرض در    <script setup> وجود دارن استفاده کنید.

<script setup>
const props = defineProps({
  msg: String
})
const emit = defineEmits(['update', 'remove'])
</script>

مزیتی هم که داره این هست که دیگه نیاز نیست این دو تابع رو ایمپورت کنید. Define props همون مقادیر props رو میگیره و defineEmits هم دقیقا همون وارامترهای emit رو نیاز داره

استفاده از slots و Attributes

معمولا slot ها و Attribute ها با استفاده از slots$ و attrs$ به صورت مستقیم در خود template استفاده میشن و کم پیدا میشه شرایطی که نیاز به اونها در‌داخل script باشه. ولی اگر بهش نیاز پیدا کردی میتونی از useSlots و useAttrs استفاده کنی.

<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>

استفاده از option های اضافه

 یک زمان هایی هم ممکنه نیاز به تعریف option های اضافه داشته باشید. مثلا بخواید اعتبارسنجی فرم ها رو با پکیج vuelidate انجام بدید. این جور موارد رو نمیتونید داخل <script setup> بیارید.   
برای حل این مشکل باید یک تک script مجزا باز کنید. Vue در نهایت خودش اونها رو با هم تلفیق میکنه

<script>
// executed only once
export const componentName = 'SirvanMonfared';
export default {
	name: componentName
    inheritAttrs: false,
    customOptions: {}
}
</script>
<script setup>
// executed for each component instance
</script>

دسترسی به متدها از بیرون کامپوننت

وقتی از  <script setup> استفاده میکنی، تمام متدها و متغیرهای تعریف شده خودبخود در تمپلیت قابل دسترسی هستند. اما خارج از کامپوننت به اونها دسترسی نخواهی داشت. (مثلا زمانی که از parent$ یا ref$ استفاده میکنی)

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

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
defineExpose({
  count,
  increment
})
</script>

استفاده از await در روت کامپوننت

معمولا برای گرفتن داده ها، به صورت async به یک service درخواست میفرستیم. در  ما <script setup> حتی در روت (Top Level) کامپوننت هم میتونیم از await استفاده کنیم

ولی در این حالت، باید برای کامپوننت از <suspense> استفاده بشه تا  vue بتونه بود async اون رو به درستی هندل کنه.

<script setup>
const user = await fetch(`/courses/1`).then((data) => data.json())
</script>

<template>
  <Suspense>
    <AsyncComponent />
  </Suspense>
</template>

البته باید‌حواست باشه که suspense هنوز یک قابلیت آزمایشیه و بهتره در حالت production استفاده نشه

برای Vuejs 2 چطور؟

اگه پروژه ات روی vue2 هست و هنوز فرصت نکردی به vue3 مهاجرت کنی، احتمالا خوشحال میشی که بدونی یه پکیجی هست که <script setup> رو روی vue2 اجرا میکنه. این هم لینکشه:

https://github.com/antfu/unplugin-vue2-script-setup