Importação e uso de composables em script setup
Importação de composables, uso de composables de terceiros do VueUse e organização das importações.
Importação e uso de composables em script setup é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.
Composáveis e script setup
Composáveis são funções que agrupam lógica reativa para reutilização. Com <script setup>, usá-los é tão simples quanto importá-los e chamá-los no nível superior.
Importe no nível superior
Sempre chame um composável no nível superior de <script setup> — não dentro de uma condição, de um laço ou de uma função aninhada. Isso garante que o Vue registre corretamente sua reatividade e seus ganchos de ciclo de vida.
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>Por que o nível superior é importante
Os composáveis geralmente registram ganchos de ciclo de vida, como onMounted, ou configuram observadores. Eles precisam ser executados durante a configuração do componente, o que só acontece quando você chama o composável de forma síncrona no nível superior.
Desestruture o que você precisa
Um composável retorna um objeto com valores e funções reativos. Desestruture somente o que o componente usa; renomeie os elementos para evitar conflitos ao chamar o mesmo composável duas vezes.
<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>Conheça o VueUse
VueUse é uma biblioteca popular de composáveis prontos. Em vez de escrever essa lógica comum por conta própria, importe um composável testado. Instale a biblioteca uma vez e importe o que precisar.
<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>useLocalStorage em ação
useLocalStorage retorna uma referência sincronizada com localStorage. Altere a referência e o armazenamento do navegador será atualizado; recarregue a página e o valor continuará disponível.
<template>
<input v-model="name" />
<p>Saved: {{ name }}</p>
</template>useMouse para coordenadas reativas
useMouse acompanha a posição do ponteiro como referências reativas. Ele adiciona e remove o ouvinte de eventos por você, para que nunca precise gerenciar a limpeza manualmente.
<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>
<template>
<p>{{ x }}, {{ y }}</p>
</template>Composáveis combinam
Um composável pode chamar outros composáveis. Essa combinação em camadas é o coração da API de composição — crie partes pequenas e combine-as em funcionalidades maiores.
import { useMouse } from '@vueuse/core'
export function useMouseDistance() {
const { x, y } = useMouse()
const distance = computed(() => Math.hypot(x.value, y.value))
return { distance }
}await no nível superior
<script setup> aceita await diretamente no nível superior. O componente se torna uma configuração assíncrona, e a estrutura pode suspender a renderização até que a promessa seja resolvida.
<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>Suspense com configuração assíncrona
Um componente que usa await no nível superior precisa ser envolvido pelo componente <Suspense> do componente pai. Suspense exibe o conteúdo alternativo até que a configuração assíncrona seja concluída.
<template>
<Suspense>
<AsyncUser />
<template #fallback>Loading...</template>
</Suspense>
</template>Práticas recomendadas
- Dê aos composáveis nomes com o prefixo
use. - Chame-os somente no nível superior.
- Retorne referências (ou um
reactiveenvolvido emtoRefs). - Prefira o VueUse para necessidades comuns antes de escrever sua própria solução.
Verificação rápida
Confirme sua compreensão dos composáveis.
Recapitulação
Você aprendeu a usar composáveis:
- Importe-os e chame-os no nível superior de
<script setup>. - Desestruture e renomeie o que precisar.
- VueUse oferece composáveis prontos, como
useLocalStorageeuseMouse. - O
awaitde nível superior torna a configuração assíncrona e funciona em conjunto com<Suspense>.
Perguntas Frequentes
A aula “Importação e uso de composables em script setup” é grátis?
Sim — o texto completo de “Importação e uso de composables em script setup” é 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 “Importação e uso de composables em script setup”?
Importação de composables, uso de composables de terceiros do VueUse e organização das importações. 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 4 de 4.
Quanto tempo leva a aula “Importação e uso de composables em script setup”?
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
- Introdução a script setup
- defineProps e defineEmits
- defineExpose e useAttrs
- Importação e uso de composables em script setup