đ€ 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 athis
. - Ele recebe dois parĂąmetros:
-
props
: As propriedades do componente (comodata()
na Options API) -
context
: Um objeto que fornece acesso a algumas funcionalidades internas, comoattrs
,slots
eemit
.
-
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 propriedadenome
. -
mensagem
Ă© um valor computado que depende decontador
. -
incrementar
é uma função que aumenta o valor docontador
.
â 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()
ereactive()
Ă© 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()
?
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)