С появлением Vue 3 и composition API у нас появилась возможность создавать особый вид компонентов, которые создаются на так называемой script setup основе.
По сути, script setup компонент - это особый вид компонента, который сделан на подходе Composition API, но является более сокращенной формой записи. Это "синтаксический сахар" Composition API компонентов для того, чтобы упростить работу с ними.
<template> часть таких компонентов аналогичная компонентам на Options API. Изменения только в организации script части.
script setup – это новая возможность, которая появилась у нас начиная с версии Vue 3.2. Она позволяет писать код в более чистом и лаконичном стиле,
Основные преимущества написания компонентов в script setup
Нет необходимости в использовании конструкции return и экспорте данных из компонента
Пример компонента на обычном Composition API
<template>
<div>
<h1>{{ message }}</h1>
<button @click="updateMessage">Обновить сообщение</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const message = ref('Привет, мир!')
const updateMessage = () => {
message.value = 'Сообщение обновлено!'
}
// Возвращаем переменные и функции, чтобы они были доступны в шаблоне
return {
message,
updateMessage
}
}
}
</script>И вот так этот компонент выглядит если его сформировать в script setup.
<template>
<div>
<h1>{{ message }}</h1>
<button @click="updateMessage">Обновить сообщение</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Привет, мир!')
const updateMessage = () => {
message.value = 'Сообщение обновлено!'
}
// Нет необходимости в return, все переменные и функции автоматически доступны в шаблоне
</script>
<style scoped></style>- script setup имеет оптимизацию компиляции, что приводит к улучшению производительности.
Работая с компонентами script setup мы максимально приближены к написанию кода, как если бы мы писали его в обычном js файле
Объявление методов, переменных и др. происходит точно также, а не в виде опций объекта, как это происходит для подхода Options API.
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Обновить сообщение</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
// Создание реактивной переменной
const message = ref('Привет, мир!')
// Метод для обновления сообщения
const updateMessage = () => {
message.value = 'Сообщение обновлено!'
}
</script>В script setup при импорте компонентов нам не нужно дублировать название компонента, как это было в подходе Options API.
Пример, как это было в Options API
<template>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>Пример, как это можно использовать в script setup
<template> <HelloWorld msg="Welcome to Your Vue.js App"/> </template> <script setup> import HelloWorld from './components/HelloWorld.vue' </script>
Подробнее познакомиться с этим подходом написания Vue компонентов можно в этом моем курсе:
https://webkyrs.info/category/composition-api-komponenty-vue-js
Итого, script setup – это более простой и удобный способ работы с Composition API, особенно для небольших и средних компонентов. Он упрощает синтаксис и улучшает читаемость кода, при этом предоставляя все те же возможности, что и стандартный Composition API.