3. Dados computados (Introdução ao Vue.js)

Nesse tópico vamos aprender sobre dados computados, que são as propriedades da instância do Vue que calculam valores.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Se você ficou com dúvidas sobre como resolver o desafio do 2. Ciclo de vida da instância. Segue o código do desafio resolvido no Github para você entender e continuar com a leitura deste post :)

Dados computados

Vamos então aprender sobre dados computados, que são as propriedades da instância do Vue que calculam valores.

Objetivo

Vamos formatar nosso título de Meme Generator para Meme-Generator salvando esse valor em um dado computado.

Problema

Queremos formatar nosso título, porém adicionar qualquer lógica mais complexa pode fazer com que nosso HTML fique com uma manutenção complicada. Por exemplo:

what the code is doing?

Solução

• Desde que dados computados calculam um valor no lugar de apenas armazenar um valor, vamos adicionar a opção para dados computados em nossa instância:
• Adicione abaixo do objeto data o seguinte código:

Dentro do newTitle ele está fazendo o replace da string Meme Generator substituindo o espaço ' 'por '-' dessa maneira o retorno vai ser Meme-Generator

Se o titlefor atualizado o dado computado vai atualizar, caso contrário seu valor vai ficar salvo em cache.

Assim vamos trocar também dentro de nosso h1 o title para nosso dado computado chamado newTitle e verificar no navegador.

Resultado

bem loko, empolgante

Outros exemplos

• No exemplo fullName ele está retornaria o nome completo pela concatenação
• No segundo exemplo showUrlele estaria salvando alguma url específica e adicionando o parâmetro id. O resultado seria por exemplo se a variável url = userse a id = 1 o dado computado retornaria users/1

3. Dados Computados (O que aprendemos)

• Dados computados calculam valores;
• Dados computados são cacheados, o seu valor só é atualizado quando uma das dependências é atualizada.

meme aleatório

3º DESAFIO

• Remover o dado computado chamado newTitle
• Criar um novo dado computado, chamado titleFormatted que retorne o título em letras maiúsculas.

challenge accepted

Resultado esperado

titleFormatted

Depois de resolver o desafio, continue a saga da construção do Gerador de Memes aprendendo sobre Renderização condicional. Let’s go!!!

Próximo post

4. Renderização condicional (Introdução ao Vue.js)

Referências

Computed Properties and Watchers - Vue.js