Introdução a script setup
Como é compilado para setup(), importações automáticas e bindings de nível superior disponíveis no template.
Introdução a script setup é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Uma API de composição mais limpa
<script setup> é uma simplificação sintática da API de composição em tempo de compilação. Ela elimina código repetitivo para que seus componentes de arquivo único se pareçam com JavaScript simples, com variáveis reativas.
De setup() a script setup
A forma clássica precisa de um export default, de uma função setup() e de um return explícito. Compare-a com a versão <script setup>.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>A versão script setup
Com <script setup>, não há objeto envolvente nem instrução de retorno. As variáveis de nível superior são disponibilizadas automaticamente ao modelo.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Não é necessário usar um retorno explícito
O compilador trata toda vinculação de nível superior — variáveis, funções e importações — como disponível no modelo. Você escreve menos e não corre o risco de esquecer algo no retorno.
As funções de nível superior também ficam disponíveis
Defina uma função no nível superior e associe-a diretamente ao modelo. Não é necessário retorná-la.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Componentes importados são registrados automaticamente
Na API clássica, era necessário listar os componentes em uma opção components. Com <script setup>, basta importar um componente para poder usá-lo no modelo.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>Ainda é compilado para setup()
Internamente, o compilador transforma <script setup> em uma função setup() normal. Você obtém o mesmo comportamento e desempenho, mas com uma forma de escrever mais limpa.
Adicionando TypeScript com lang ts
Ative o TypeScript adicionando lang="ts" à tag. Em seguida, você poderá tipar variáveis, usar genéricos nas macros do compilador e obter inferência completa de tipos.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Macros do compilador
Dentro de <script setup>, você tem acesso a macros especiais do compilador, como defineProps, defineEmits e defineExpose. Elas não são importadas — o compilador as reconhece. Você explorará cada uma nas próximas lições.
Combinando com um bloco script normal
Às vezes, você precisa de opções executadas uma vez no escopo do módulo, como um nome personalizado para o componente. É possível adicionar um bloco <script> normal ao lado de <script setup>.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Por que as equipes preferem script setup
- Menos código repetitivo — sem objeto envolvente nem retorno.
- Registro automático de componentes.
- Melhor desempenho em tempo de execução graças à análise em tempo de compilação.
- Excelente suporte a TypeScript.
Esse é o estilo recomendado para componentes de arquivo único do Vue 3.
Verificação rápida
Confirme sua compreensão de script setup.
Recapitulação
Você aprendeu os fundamentos de <script setup>:
- É uma simplificação em tempo de compilação sobre
setup(). - Não é necessário um retorno explícito — as vinculações de nível superior são disponibilizadas automaticamente.
- Os componentes importados são registrados automaticamente.
- Adicione
lang="ts"para usar TypeScript. - Macros do compilador, como
defineProps, ficam disponíveis sem importações.
Perguntas Frequentes
A aula “Introdução a script setup” é grátis?
Sim — o texto completo de “Introdução a script setup” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Introdução a script setup”?
Como é compilado para setup(), importações automáticas e bindings de nível superior disponíveis no template. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Introdução a script setup”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Introdução a script setup
- defineProps e defineEmits
- defineExpose e useAttrs
- Importação e uso de composables em script setup