sexta-feira, 28 de dezembro de 2018

Vue Parte 5 - Watch e a diretiva v-model

No post anterior dessa série, parte 4, vimos as computed properties e a diretiva v-if. Neste artigo veremos outra propriedade da instância de Vue, que inclusive tem um comportamento bem parecido com o da Computed Property, chamada de watch. Continuando nossos estudos das diretivas, veremos a diretiva v-model, bastante útil quando construímos formulários web.

Diretiva v-model


A diretiva v-model serve para fazer o binding (ligação) entre elementos html (input, textarea e select) e seus dados. Vue forncece também alguns modificadores para v-model como: lazy, number e trim. Lazy faz com que a sincronização com o modelo aconteça apenas após um evento de change. Number permite a conversão automática do valor para number (só lembrando que, por padrão, o valor retornado por um elemento html é sempre string). Por último, trim remove os espaços do início e do fim da string. No exemplo podemos ver todas funcionalidades de v-model. 



Observe que o binding é bidirecional (two-way binding). Usamos os modificadores em login (lazy), em endereco (trim) e em idade (number).

Watch

Um watcher (observador) permite que você seja notificado sempre que uma mudança em uma propriedade (data) aconteça. Watchers são semelhantes às computed properties, porém são usados para casos bem específicos. Uma diferença do watcher é que ele fornece o valor anterior e o modificado da propriedade.

Para criar um watcher é preciso, basicamente, declarar o nome da propriedade que se deseja escutar e definir um método para capturar o evento. O método handler define dois parâmetros: o primeiro é o valor anterior e o outro é o valor atual da propriedade. Vejamos um exemplo de um watcher.


Vale a pena destacar dois pontos sobre watchers. O primeiro, é que não devemos usar arrow functions como handler de um watch, pois o contexto de this não será associado a ela, ou seja,  this.mensagem não apontaria corretamente para a propriedade definida em data. O segundo, e talvez mais óbvio, é que o nome do watcher deve ser exatamente igual ao nome da propriedade que se deseja observar, no exemplo acima estamos observando mudanças na propriedade resposta.

Immediate e Deep


Watchers possuem ainda duas propriedades: immediate e deep. Quando immediate é configurada como true, ela faz com que o método handler de watch seja chamado assim que o valor da propriedade observada mudar. Quando estamos observado objetos complexos, com propriedades aninhadas, precisamos utilizar a propriedade deep para dizer ao Vue que queremos observar mudanças nos valores aninhados do objeto.

Para mostrar o funcionamento de Immediate e Deep vamos retomar o exemplo que vimos na seção de v-model e adicionar um watcher para o objeto usuario.

Se você alterar o valor de deep para false o watcher não será chamado. Assim, sempre que for preciso observar mudanças em objetos é precisar setar o valor de deep para true. Immediate é notado quando a página é carregada. Quando seu valor é true o método do watch será chamado após a inicialização do objeto em data().

É possível também observar apenas uma propriedade específica de um objeto. Nesse caso, a expressão deve estar entre aspas, como no trecho abaixo.

O uso de watchers é bem restrito. Na maioria dos casos uma computed property resolve o problema, mas o watch tem seu valor, e quando estudarmos (em algum dia no futuro..rs) sobre mudanças de rotas, os watchers voltarão à cena. Mas por enquanto é isso! Até o próximo artigo.

domingo, 2 de dezembro de 2018

Vue Parte 4 - Computed Properties e a Diretiva v-if

No post anterior dessa série, parte 3, vimos a diretiva v-on e como usar methods para tratar eventos disparados por elementos html. Neste post, vamos continuar explorando as propriedades da instância de Vue, dessa vez estudaremos as computed properties. Veremos, também, mais uma diretiva: v-if.

Diretiva v-if


A diretiva v-if deve ser utilizada quando precisarmos fazer renderização condicional de elementos. Ela pode ser usada em qualquer elemento html e recebe como parâmetro uma expressão, variável ou valor booleano. Caso o parâmetro seja um valor javascript truthy, então o elemento será renderizado. Também é possível adicionar um bloco "senão" usando v-else. As versões mais recentes de Vue permitem ainda o uso da diretiva v-else-if, que permite encadear condições.


As diretivas em vue tem acesso a todas as propriedades definidas em data. No exemplo acima, a propriedade valido está sendo usada para exibir condicionalmente o valor Válido ou Inválido na página. Para fins de exemplo, o trecho a seguir mostra como usar as três diretivas em conjunto: v-if, v-else-if e v-else.

Computed Properties

As diretivas v-if/else nos permitem exibir dados baseado em certas condições, mas apesar de sua facilidade de uso, o código no template começa a ficar difícil de manter, principalmente se precisarmos usar lógicas mais complexas. O ideal é que esse tipo de código fique no Javascript, onde pode inclusive ser reutilizado, caso necessário. É aí onde entram as Computed Properties.

Uma computed property é bem parecida com um method em sua forma de escrita, porém ela difere deste em alguns aspectos. O primeiro é que embora seja escrita como um método, uma computed property é usada como se fosse na verdade uma property (ou uma variável). O nome computed não é à toa, vem do fato de ela ser computada a partir de outras propriedades. Uma computed property geralmente é somente leitura, mas pode ser de escrita (veremos isso em outro momento). Por último, mas não menos importante, o valor retornado por uma computed property é cacheado, de forma que ela só será computada novamente caso alguma propriedade que ela usa seja alterada. Vamos refatorar o exemplo anterior trocando as diretivas v-if/else por computed properties.


Veja como o template ficou bem mais simples sem a lógica condicional. Você pode observar que a computed property foi usada como se fosse uma variável e não um método. Para observamos as outras duas características das computed properties: dependência e caching, vamos fazer uma pequena mudança nesse exemplo. 


O método gerarIdade atribui à propriedade idade um valor aleatório entre 1 e 3. Usamos um range baixo apenas para ficar mais fácil de gerarmos valores repetidos com frequencia. Como idade é uma dependência da computed property tipoEntrada, esta será executada sempre que o valor de idade mudar. Ao executar o exemplo você irá notar que a mensagem 'tipoEntrada chamado' só irá aparecer no console quando o valor de idade for diferente. Isso acontece porque computed properties são cacheadas.

Talvez devido à simplicidade desse exemplo você não dê tanta importância a isso. Porém, imagine que uma lógica mais demorada fosse executada. Computed Properties são bastante utilizadas em Vue. Quando estudarmos vue-router e vuex você verá melhor quão úteis elas são. A tabela a seguir mostra um resmo das diferenças entre computed properties e methods.



Computed Properties Methods
Roda somente se as dependências mudarem Roda sempre que ocorre um update
cacheado sem cache
usado como uma property usado para tratar eventos (v-on)
por padrão somente leitura por padrão é leitura/escrita


Até o próximo artigo galera!