С появлением 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.