Vue Academy · Aula

Propriedades computadas

Derive valores reativos armazenados em cache com propriedades computadas.

Propriedades computadas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. 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 3 aulas no total.

O que é uma propriedade computada?

Uma propriedade computada deriva um valor de outros dados reativos.

Ela é recalculada somente quando suas dependências mudam
É lida como uma propriedade comum nos modelos
Mantém os modelos limpos ao transferir a lógica para o JS

Definindo uma propriedade computada

Na API de Composição, use a função computed.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Usando uma propriedade computada no modelo

Uma propriedade computada é acessada como uma propriedade de dados, sem parênteses.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

Propriedades computadas ou métodos

Um método também retorna um valor, então por que usar uma propriedade computada?

Uma propriedade computada fica armazenada em cache com base nas dependências
Um método é executado sempre que é chamado durante uma renderização

Propriedades computadas são mais eficientes para valores derivados usados repetidamente.

O armazenamento em cache na prática

Uma propriedade computada é executada novamente somente quando uma dependência muda. Se você a ler várias vezes, o resultado armazenado em cache será reutilizado.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Métodos são executados todas as vezes

Por outro lado, um método recalcula o valor a cada chamada, mesmo que as entradas não tenham mudado.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed na API de Opções

A API de Opções declara propriedades computadas em um bloco computed.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Getters de propriedades computadas

Por padrão, uma propriedade computada é somente leitura: ela tem apenas um getter.

O getter é executado para produzir o valor sempre que as dependências mudam.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Setters de propriedades computadas

Você pode tornar uma propriedade computada gravável fornecendo funções get e set.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Usando o setter

Quando você atribui um valor a uma propriedade computada gravável, o setter é executado.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Quando usar propriedades computadas

Use uma propriedade computada quando precisar de um valor derivado de um estado reativo.

Filtrar ou ordenar uma lista
Formatar dados para exibição
Combinar vários valores em um só

Use observadores (na próxima lição) quando precisar reagir com efeitos colaterais.

Verificação rápida

Teste sua compreensão sobre propriedades computadas.

Recapitulação: propriedades computadas

Você aprendeu sobre estados derivados:

computed deriva valores de dados reativos
Ela fica armazenada em cache e é recalculada somente quando as dependências mudam
Métodos são executados a cada chamada; propriedades computadas, não
Uma propriedade computada pode ter um getter e um setter opcional

Próximo: observadores e reatividade profunda.

Perguntas Frequentes

A aula “Propriedades computadas” é grátis?

Sim — o texto completo de “Propriedades computadas” é 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 3 aulas no total.

O que vou aprender em “Propriedades computadas”?

Derive valores reativos armazenados em cache com propriedades computadas. 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 2 de 3.

Quanto tempo leva a aula “Propriedades computadas”?

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

← Voltar para Vue Academy