A função setup() e script setup
Escreva lógica na função setup() ou use a simplificação , exponha valores ao template e entenda os hooks do ciclo de vida na Composition API.
A função setup() e script setup é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
A função setup()
Na Composition API do Vue 3, setup() é uma opção do componente que substitui data, methods, computed e watch. Ela recebe props e o contexto de setup como argumentos e retorna o que o template precisa.
export default {
props: { userId: String },
setup(props, { emit, attrs, slots }) {
const user = ref(null);
onMounted(async () => {
user.value = await fetchUser(props.userId);
});
return { user }; // must return what template uses
}
};<script setup> — Açúcar sintático
<script setup> é açúcar sintático em tempo de compilação para setup(). Tudo o que for declarado no nível superior fica automaticamente disponível no template. Não é necessária uma instrução return.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>Ganchos do ciclo de vida em setup()
Os ganchos do ciclo de vida do Vue 3 são funções importadas: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate etc. Eles podem ser chamados várias vezes para registrar vários manipuladores.
<script setup>
import { onMounted, onUnmounted } from 'vue';
let timer: ReturnType<typeof setInterval>;
onMounted(() => {
timer = setInterval(tick, 1000);
console.log('Component mounted');
});
onUnmounted(() => {
clearInterval(timer); // cleanup
});
</script>Props de setup()
Em setup(), props são reativas. Não as desconstrua diretamente — use toRefs(props) ou acesse-as por meio de props.x para manter a reatividade.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — Exposição ao componente pai
Por padrão, componentes