0Pricing
Vue Academy · Aula

Reatividade avançada: shallowRef e triggerRef

shallowRef para desempenho, markRaw para excluir da reatividade e triggerRef para disparo manual.

Reatividade avançada: shallowRef e triggerRef é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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.

Além da referência e da reatividade

A reatividade profunda do Vue é conveniente, mas nem sempre é o que você deseja. Para objetos grandes ou instâncias externas, o rastreamento profundo desperdiça recursos. O Vue oferece shallowRef, triggerRef e markRaw para um controle preciso.

Como a referência faz o rastreamento profundo

Uma ref comum que contém um objeto torna todo o objeto profundamente reativo — alterar qualquer propriedade aninhada dispara atualizações. Isso é ótimo para estados pequenos, mas tem um custo alto em estruturas grandes.

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef: somente .value é reativo

shallowRef rastreia a reatribuição de .value, mas não rastreia mutações dentro do valor armazenado. Alterações internas não disparam renderizações.

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

Quando usar shallowRef

Use-o para dados grandes e praticamente imutáveis que você substitui por completo ou para envolver objetos externos (uma instância de gráfico, um grande conjunto de dados) quando o rastreamento profundo adiciona sobrecarga sem trazer benefícios.

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

O problema das mutações profundas

Às vezes, você DO modifica diretamente dentro de uma shallowRef (por desempenho), mas ainda precisa de uma nova renderização em um momento controlado. O Vue não consegue detectar a alteração, então a interface fica desatualizada.

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef: Forçar uma atualização

triggerRef força manualmente a execução novamente dos efeitos que dependem de uma ref superficial, depois que você modifica seu conteúdo. Você agrupa várias modificações e aciona a atualização uma única vez.

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

Um padrão de desempenho

O padrão é: manter uma estrutura grande em shallowRef, modificá-la livremente sem o custo de reatividade a cada alteração e chamar triggerRef uma única vez quando quiser que a visualização reflita o lote de alterações.

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw: sair completamente da reatividade

markRaw marca um objeto para que o Vue nunca o torne reativo, mesmo dentro de um reactive ou de um ref normal. Utilize-o para instâncias de classes de terceiros que não devem ser encapsuladas em proxies.

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

Por que markRaw é importante

Encapsular instâncias complexas de classes (mapas, editores, websockets) em um proxy reativo pode quebrar suas referências internas ou causar erros sutis. markRaw mantém essas instâncias intactas enquanto elas continuam dentro do estado reativo.

Combinando as ferramentas

Essas ferramentas podem ser combinadas: uma shallowRef que contém uma instância marcada com markRaw oferece um espaço que você pode substituir de forma reativa, com um objeto interno que o Vue nunca encapsula em um proxy — ideal para integrações externas.

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

Custo da reatividade versus controle

A escolha envolve uma troca: a reatividade profunda é simples, mas mais pesada; as APIs superficiais oferecem controle e desempenho ao custo de você precisar acionar as atualizações manualmente. Utilize-as somente quando a análise de desempenho mostrar essa necessidade.

Verificação rápida

Verifique sua compreensão sobre reatividade avançada.

Recapitulação

Você aprendeu controles avançados de reatividade:

  • shallowRef reage apenas à reatribuição de .value, não às modificações internas — é útil para dados grandes ou externos.
  • triggerRef força manualmente as atualizações depois que você modifica o conteúdo de uma ref superficial (faça um lote e then acione uma vez).
  • markRaw remove permanentemente um objeto da reatividade, sendo ideal para instâncias de classes de terceiros.
  • Essas ferramentas oferecem desempenho e controle, mas exigem que você acione as atualizações manualmente.

Perguntas Frequentes

A aula “Reatividade avançada: shallowRef e triggerRef” é grátis?

Sim — o texto completo de “Reatividade avançada: shallowRef e triggerRef” é 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 “Reatividade avançada: shallowRef e triggerRef”?

shallowRef para desempenho, markRaw para excluir da reatividade e triggerRef para disparo manual. 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 1 de 4.

Quanto tempo leva a aula “Reatividade avançada: shallowRef e triggerRef”?

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. Reatividade avançada: shallowRef e triggerRef
  2. Fábricas de composables e composables parametrizados
  3. Máquinas de estado com XState no Vue
  4. effectScope para efeitos agrupados
← Voltar para Vue Academy