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