DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

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 }
  }
}

Enter fullscreen mode Exit fullscreen mode

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 }
  }
}

Enter fullscreen mode Exit fullscreen mode

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 }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

⚠ 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 }
  }
}
Enter fullscreen mode Exit fullscreen mode

❌ 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 }
}
Enter fullscreen mode Exit fullscreen mode

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

Situação Precisa de return?
Usar variĂĄveis ou funçÔes no template (setup()) ✅ Sim
Usando <script setup> ❌ NĂŁo (Ă© automĂĄtico)
Criando um composable (função reutilizável) ✅ Sim
Código interno sem uso no template ❌ Não

Top comments (0)