Conceito base do setup()

🤔 O que é o setup()?

O setup() é a função principal da Composition API. É onde você define e organiza a lógica reativa e a interação entre os dados e o comportamento do componente.

Como funciona o setup()?

• O setup() é executado antes do componente ser criado, portanto, ele não tem acesso a this.
• Ele recebe dois parâmetros:
  1. props: As propriedades do componente (como data() na Options API)
  2. context: Um objeto que fornece acesso a algumas funcionalidades internas, como attrs, slots e emit.

Dentro do setup(), você pode usar qualquer lógica reativa e retornar as variáveis e funções que você deseja expor ao template.

🧠 Compreendendo a reatividade: ref e reactive

Como funciona o ref()

• O ref() é usado para criar valores reativos.
• Ideal para valores primitivos (números, strings, booleans).
• A propriedade value é usada para acessar o valor armazenado.

Exemplo com ref():

import { ref } from 'vue' export default { setup() { const contador = ref(0) const incrementar = () => { contador.value++ } return { contador, incrementar } } } 

No exemplo acima, o valor contador é reativo e, ao ser alterado, o Vue automaticamente atualiza a interface do usuário.

Como funciona o reactive()

• O reactive() é usado para criar objetos ou arrays reativos.
• Ele trabalha diretamente sobre o objeto ou array, sem a necessidade de acessar a propriedade value.

Exemplo com reactive():

import { reactive } from 'vue' export default { setup() { const estado = reactive({ contador: 0, nome: 'Vue' }) const incrementar = () => { estado.contador++ } return { estado, incrementar } } } 

No exemplo acima, o objeto estado é reativo, e você pode acessar ou modificar suas propriedades diretamente.

🧩 O que mais podemos fazer no setup()?

• computed(): Cria valores derivados com base em reatividade.
• watch(): Observa mudanças nos valores reativos e executa ações quando esses valores mudam.
• Outros hooks de ciclo de vida: Como onMounted(), onUpdated(), onBeforeUnmount(), entre outros.

⚡ Exemplo prático: Contador simples com ref() e reactive() e computed()

import { ref, reactive, computed } from 'vue' export default { setup() { const contador = ref(0) const estado = reactive({ nome: 'Vue' }) const mensagem = computed(() => { return `Contador: ${contador.value}` }) const incrementar = () => { contador.value++ } return { contador, estado, incrementar, mensagem } } } 

O que está acontecendo aqui?

• contador é uma referência (ref) a um número, e é usado para armazenar o valor do contador.
• estado é um objeto reativo com a propriedade nome.
• mensagem é um valor computado que depende de contador.
• incrementar é uma função que aumenta o valor do contador.

✅ Conclusão

• O setup() é o coração da Composition API e é onde você vai colocar a maior parte da lógica reativa.
• Entender o uso de ref() e reactive() é fundamental para trabalhar com dados dinâmicos e interativos.

😄 Adicional

Quando você precisa do return:

Quando você quer que variáveis ou funções definidas dentro do setup() fiquem disponíveis no seu template (ou seja, no HTML do componente), aí sim você precisa retornar elas.

<template> <button @click="incrementar">Contar: {{ contador }}</button> </template> <script setup> import { ref } from 'vue' const contador = ref(0) function incrementar() { contador.value++ } </script> 

⚠️ Neste exemplo usamos <script setup>, que já faz o return automaticamente. Mas se você estiver usando o setup() dentro do export default, aí você precisa fazer o return manualmente:

export default { setup() { const contador = ref(0) function incrementar() { contador.value++ } // Retornar para usar no template return { contador, incrementar } } } 

❌ Quando você não precisa do return:

Se você estiver criando um componente puramente lógico, como um composable (função reativa reutilizável), ou se o componente não tiver template, não precisa retornar nada pro template.

// composable: useContador.js import { ref } from 'vue' export function useContador() { const contador = ref(0) const incrementar = () => contador.value++ return { contador, incrementar } } 

📌 Resumo rápido: Precisa de return no setup()?