0Pricing
Vue Academy · Aula

VueUse: a biblioteca de composables

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — recursos práticos do VueUse.

VueUse: a biblioteca de composables é 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.

O que é VueUse

VueUse (@vueuse/core) é uma grande coleção de funções reutilizáveis prontas para tarefas comuns — armazenamento, sensores, APIs do navegador e muito mais. Ele evita que você precise recriá-las.

npm install @vueuse/core

useLocalStorage para persistência

useLocalStorage retorna uma referência sincronizada com localStorage. As alterações persistem automaticamente entre recarregamentos, com a serialização feita por você.

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

Reativo e persistente

A referência retornada se comporta como qualquer outra — associe-a a v-model —, mas seu valor sobrevive às atualizações da página porque o VueUse grava no armazenamento.

<input v-model="name" />

useMouse para a posição do cursor

useMouse acompanha o ponteiro e retorna referências reativas x e y que são atualizadas à medida que o cursor se move.

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

Exibindo as coordenadas do mouse

Associe as referências no modelo; elas são atualizadas a cada movimento do mouse sem que você precise configurar ouvintes.

<p>Cursor: {{ x }}, {{ y }}</p>

useWindowSize para dimensões

useWindowSize fornece referências reativas width e height, atualizadas durante o redimensionamento — excelentes para lógica responsiva no script.

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

Lógica responsiva

Combine o tamanho da janela com um valor computado para orientar decisões de layout de forma reativa.

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

useIntersectionObserver para carregamento sob demanda

useIntersectionObserver informa quando um elemento entra na área visível — a base para carregar imagens sob demanda ou implementar rolagem infinita.

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

Acionando com a visibilidade

Passe uma referência do modelo e um retorno de chamada que seja executado com os registros de interseção. Carregue a imagem ou busque mais dados quando o alvo estiver visível.

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

Limpeza automática

Um grande benefício: as funções reutilizáveis do VueUse registram e removem seus próprios ouvintes e observadores quando o componente é desmontado. Você obtém a limpeza correta automaticamente.

Por que usar VueUse

Ele permite a eliminação de código não utilizado, é bem testado e prioriza TypeScript. Para necessidades comuns — armazenamento, sensores, rede e tempo — use o VueUse antes de escrever sua própria função reutilizável.

Verificação rápida

Qual função reutilizável do VueUse persiste uma referência em localStorage?

Recapitulação

Você conheceu o VueUse: useLocalStorage (estado persistente), useMouse (posição do cursor), useWindowSize (dimensões reativas) e useIntersectionObserver (acionador de carregamento sob demanda), todos com limpeza automática e eliminação de código não utilizado.

Perguntas Frequentes

A aula “VueUse: a biblioteca de composables” é grátis?

Sim — o texto completo de “VueUse: a biblioteca de composables” é 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 “VueUse: a biblioteca de composables”?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — recursos práticos do VueUse. 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 “VueUse: a biblioteca de composables”?

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

  1. O que caracteriza um bom composable
  2. useCounter: um composable simples
  3. useFetch: composable de dados assíncronos
  4. VueUse: a biblioteca de composables
← Voltar para Vue Academy