hyf0/criar-composavel-adaptavel

O que criar-composavel-adaptavel faz?

Crie um composable Vue de nível de biblioteca que aceita entradas talvez reativas (MaybeRef / MaybeRefOrGetter), permitindo que os chamadores passem um valor simples, ref ou getter. Normalize as entradas com toValue()/toRef() dentro de efeitos reativos (watch/watchEffect) para manter o comportamento previsível e reativo. Use esta habilidade quando o usuário pedir para criar composáveis adaptáveis ou reutilizáveis.

Visão Geral

Esta habilidade ajuda a criar composables Vue que seguem as melhores práticas para aceitar entradas flexíveis. É especialmente útil ao construir bibliotecas de composables que precisam ser amigáveis ao usuário e reativas.

Quando Usar

• Quando o usuário pedir para criar um composable que aceite valores estáticos ou reativos.
• Quando o usuário mencionar MaybeRef ou MaybeRefOrGetter.
• Ao projetar APIs de composables reutilizáveis.

Passos

1. Entender o comportamento desejado do composable.
2. Identificar parâmetros que devem aceitar entradas talvez reativas.
3. Usar MaybeRef<T> ou MaybeRefOrGetter<T> nos tipos dos parâmetros de entrada.
4. Dentro do composable, detectar se a entrada é reativa usando toRef() ou toValue().
   • Use toRef() para rastreamento de reatividade contínuo dentro de watchEffect.
   • Use toValue() para obter o valor atual sem rastreamento (seguindo Vue 3.3+).
5. Criar um efeito com watch ou watchEffect para realizar a lógica reativa principal.
6. Retornar um objeto com ref ou computed para expor o resultado de forma reativa.

Exemplo

import { ref, watchEffect, toValue, type MaybeRefOrGetter } from 'vue'

export function useContador(valorInicial: MaybeRefOrGetter<number>) {
  const contagem = ref(0)

  watchEffect(() => {
    contagem.value = toValue(valorInicial)
  })

  function incrementar() {
    contagem.value++
  }

  return { contagem, incrementar }
}

Dicas de TypeScript

• Use MaybeRef<T> para aceitar T | Ref<T>.
• Use MaybeRefOrGetter<T> para aceitar T | Ref<T> | (() => T).
• Considere usar genéricos para retornar o tipo correto.

Próximos Passos

Depois de escrever o composable, teste-o com diferentes formas de entrada:

• Valor estático: useContador(5)
• Ref: const ref = ref(10); useContador(ref)
• Getter: useContador(() => someCondition.value ? 10 : 20)