Vue Academy · Aula

Função setup() e variáveis reativas

O ponto de entrada setup(), ref() para valores primitivos, reactive() para objetos e retorno de valores.

Função setup() e variáveis reativas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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.

O ponto de entrada setup()

A API de Composição fica dentro de uma opção especial do componente chamada setup(). Ela é executada uma vez, antes de o componente ser criado, e é onde você declara o estado reativo e as funções.

Tudo o que você return de setup() fica disponível no template.

Criando estado reativo com ref

ref() envolve um único valor (número, texto, booleano ou até mesmo um objeto) em um contêiner reativo. O valor propriamente dito fica na propriedade .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

Criando objetos reativos com reactive

reactive() recebe um objeto comum e retorna um proxy profundamente reativo. Você acessa as propriedades diretamente — não existe .value.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Retornando o estado para o template

Tudo o que é retornado de setup() como um objeto se torna uma vinculação do template. Aqui, tanto count quanto user são expostos.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Desempacotamento automático no template

Em JavaScript, você escreveu count.value. No template, escreve apenas count. O Vue desempacota automaticamente refs no nível superior, portanto você nunca digita .value no template.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Adicionando funções

As funções definidas em setup() podem ler e alterar o estado reativo. Lembre-se: dentro do JavaScript, você ainda usa .value para refs.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

Conectando tudo no template

Retorne a função e vincule-a a um evento. Quando o botão é clicado, ele chama increment, que altera o ref, e o Vue renderiza novamente.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

A palavra-chave this não é necessária

Dentro de setup(), não existe this. Você trabalha diretamente com as variáveis que declarou. Isso torna o código mais fácil de entender e mais amigável ao TypeScript.

Tentar usar this em setup() não fornecerá a instância do componente.

setup é executado antes da criação

setup() é executado muito cedo — antes de created e antes de a instância do componente estar totalmente configurada. É por isso que this não está disponível e que você ainda não pode acessar o DOM aqui.

Argumentos de setup(): props e contexto

setup(props, context) recebe as props resolvidas como primeiro argumento e um objeto de contexto como segundo. O contexto expõe attrs, slots, emit e expose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Um mini componente completo

Aqui está tudo junto: um ref, um objeto reativo, uma função e as vinculações retornadas.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Verificação rápida

Certifique-se de que entendeu setup() e as variáveis reativas.

Recapitulação

Você aprendeu os fundamentos da API de Composição:

setup() é executado uma vez antes da criação e retorna vinculações do template.
ref() envolve um valor — use .value em JS.
reactive() envolve um objeto — acesse as propriedades diretamente.
Os templates desempacotam refs automaticamente, portanto você não usa .value neles.
Não existe this dentro de setup().

Perguntas Frequentes

A aula “Função setup() e variáveis reativas” é grátis?

Sim — o texto completo de “Função setup() e variáveis reativas” é 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 “Função setup() e variáveis reativas”?

O ponto de entrada setup(), ref() para valores primitivos, reactive() para objetos e retorno de valores. 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 2 de 4.

Quanto tempo leva a aula “Função setup() e variáveis reativas”?

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

Por que usar a Composition API?
Função setup() e variáveis reativas
ref versus reactive: quando usar cada um
Computed e Watch na Composition API

← Voltar para Vue Academy