Em Vue.js, existem várias maneiras de definir valores estáticos ou dinâmicos para exibir no modelo. Isso inclui o uso de interpolação de texto, codificação direta em seu HTML ou até mesmo o uso de expressões simples para modificar os dados.

É aqui que as propriedades computadas são muito úteis. Neste tutorial, examinaremos os fundamentos do uso de propriedades computadas no Vue. js . Em seguida, colocaremos todas as nossas novas habilidades em prática, criando um aplicativo de exemplo ao vivo.

Aqui está o que vamos cobrir:

• O que são propriedades computadas em Vue.js?
• Como as propriedades computadas são usadas no Vue.js?
  • Filtrando dados
  • Cálculos
  • Condicionais booleanos dentro do v-if
  • Usando propriedades computadas com mapGetters
  • Usando propriedades computadas como configuradores
• Exemplo de propriedades computadas: Construindo um carrinho de compras em Vue.js

O que são propriedades computadas em Vue.js?

Em Vue.js , as propriedades computadas permitem que você crie uma propriedade que pode ser usada para modificar, manipular e exibir dados em seus componentes de maneira legível e eficiente.

Você pode usar propriedades computadas para calcular e exibir valores com base em um valor ou conjunto de valores no modelo de dados. Ele também pode ter alguma lógica personalizada que é armazenada em cache com base em suas dependências, o que significa que não recarrega, mas tem uma dependência que muda, permitindo que ouça de alguma forma as mudanças e aja de acordo.

Para um exemplo básico , considere a propriedade computada count :

  
 
 {{count}} 
 
 

A propriedade count recebe o this.shopNumber como uma dependência da função data e retorna uma frase contendo o this.shopNumber e é disponibilizado diretamente no modelo.

Como as propriedades computadas são usadas no Vue.js?

Você pode usar propriedades computadas para resolver problemas mais complexos. Vamos detalhar mais alguns casos de uso em que as propriedades computadas do Vue.js são úteis.

Filtragem de dados

As propriedades computadas são ótimas para filtrar dados. Por exemplo, digamos que você esteja filtrando uma matriz de uma barra de pesquisa de entrada.

Na função data abaixo, temos um array, userData , contendo informações que desejamos exibir no componente, mas também precisamos permitir que o usuário filtre o que é exibido ao pesquisar com uma tag de entrada (associada à propriedade data searchQuery ). Tudo isso é feito dentro da propriedade computada resultQuery :

 export default { nome:"HelloWorld", dados() { Retorna { dados do usuário: [ { imagem: "https://pbs.twimg.com/profile_images/1347769407892811786/fJyOAatX_400x400.jpg", nome:"Tunde", uid:"LfhxERlvyfh2auIY0HnpidjJg3L2", }, { nome:"bola", imagem: "https://pbs.twimg.com/profile_images/1355220122512863234/0NZI8bzI_400x400.jpg", uid:"R6lyXuNwZfc9ztLDfIZBSZLg2QD2", }, { uid:"k8ZVBdA9wfetiB8vJV3Qc07NZty1", imagem: "https://pbs.twimg.com/profile_images/1321720900274868224/w5iM_Ads_400x400.jpg", nome:"Supremo", }, ], searchQuery: null }; }, calculado: { resultQuery () { if (this.searchQuery) { retornar this.userData.filter ((item)=> { retornar this.searchQuery .toLowerCase () .dividir("") .every ((v)=> item.name.toLowerCase (). inclui (v)); }); } senão { console.log (this.userData); return this.userData; } }, },
};

Em nosso modelo, searchQuery é vinculado à tag de entrada de pesquisa e os dados retornados da resultQuery são repetidos para serem exibidos no componente.

Basicamente, resultQuery verifica se o usuário digitou algo na tag input vinculada a searchQuery . Em seguida, ele filtra com o userData.name . Se o usuário não tiver pesquisado nada, ele retornará toda a matriz userData .

Criei um exemplo ao vivo em CodeSandbox .

Cálculos

Na mesma linha, podemos usar propriedades computadas para lidar com cálculos. Tudo o que precisamos fazer é passar a dependência para a propriedade, escrever o cálculo que precisamos executar e retornar a resposta:

Temos uma propriedade computada totalMarks onde passamos uma dependência ( número ) da função dados e a multiplicamos por dois:

  
 
 {{totalMarks}} 
 

Aqui está um exemplo ao vivo .

Em nosso modelo, simplesmente chamamos o nome da propriedade computada dentro dele e o valor é exibido no componente. Este pode parecer um exemplo relativamente simples, mas imagine que você está construindo uma calculadora financeira e lidando com várias dependências e cálculos mais complexos, como juros compostos:

 Juros compostos=P [(1 + i) n-1]

Onde:

• P é o principal
• i é a taxa de juros nominal anual em termos percentuais
• n é o número de períodos de composição

Escrever essa fórmula diretamente em seu modelo não é bom para a legibilidade do código e, definitivamente, não é escalonável.

Boolean condicionais dentro de v-if

Você pode usar propriedades computadas para verificar se uma condição é verdadeira e, em seguida, usar v-if em nosso modelo para determinar se deve exibir um bloco de código ou não.

Aqui, o displayBoolean é definido como true por padrão e é definido como uma dependência da propriedade computada display . Em display , podemos verificar se a propriedade display é true . Se for, então retornamos true ; caso contrário, retornamos false :

O resultado de display é alimentado no v-if em nosso modelo para determinar se o bloco de código será exibido ou oculto. Em seguida, criamos um botão para alternar o valor de displayBoolean para fins de demonstração:

  
 
 Exibir condicionalmente 
  Toogle  

Usando propriedades computadas com mapGetters

Considerando que estamos usando mapGetters , podemos usar propriedades computadas para acessar os dados recuperados de nossos getters.

No exemplo abaixo, renomeamos nosso getter getChatInfo para chatData e retornamos os dados dentro do getter por meio de nossa propriedade computada chatInfo :

Usando propriedades computadas como configuradores

Embora bastante heterodoxo, você também pode usar propriedades computadas para definir dados em vez de apenas recuperar dados como um getter de computador.

Podemos definir um setter computado assim:

theFullName é uma propriedade computada que tem a capacidade de definir dados vinculando a propriedade computada ao conteúdo de uma tag input usando v-model . Aqui, manipulamos o valor da propriedade de dados firstName digitando e vendo a mudança em tempo real:

  
 
 {{theFullName}}