Vue.JS assista a propriedade

Vue.O JS é uma estrutura JavaScript muito poderosa e reativa, usada para criar UIS (interfaces de usuário) e spas (aplicativos de uma página única). Ele é construído combinando os melhores recursos das estruturas angulares e de reação já existentes. Os desenvolvedores também gostam de codificar ou construir aplicativos nele.

Vue.JS fornece a propriedade Watch para observar e reagir às variáveis ​​ou alterações de dados. Podemos usar a propriedade Watch para manipular o DOM quando a variável assistida é alterada. Neste artigo, vamos dar uma olhada em como podemos usar a propriedade Watch e executar as tarefas desejadas na mudança de variável. Então vamos começar.

Observadores

A observador em vue.JS age como um ouvinte de evento para uma variável ou propriedade. É usado para realizar várias tarefas sobre a mudança de alguma propriedade específica. É útil ao fazer tarefas assíncronas.

Vamos demonstrar e entender o conceito do vigia, considerando um exemplo.

Exemplo:

Suponha que estamos construindo um site de comércio eletrônico, no qual temos uma lista de itens, e estamos construindo o carrinho ou componente de checkout. Nesse componente, precisamos calcular a quantidade de um único elemento sobre o número de itens.

Primeiro, estamos assumindo algumas propriedades nos dados.

dados()
retornar
ItemName: "Item 1",
ItemQuantity: NULL,
ItemPrice: 200,
TotalPrice: 0

,

Em que assistiremos à propriedade "ItemQuantity" e calcular o preço total. Primeiro faremos as ligações de dados no modelo,

Antes de escrever o código para assistir à variável e calcular o preço total.

Depois de escrever este código, teremos nossa página da web como esta:

Agora, queremos alterar o preço total da mudança de "Itemquantity", como sempre que o usuário altera a quantidade usando o campo de entrada. O preço total deve ser alterado. Para esse fim, teremos que assistir à “ItemQuantity” e calcular o preço total sempre que a propriedade “Itemquantity” for alterada.

Então, o observador da "Itemquantity" seria assim:

assistir:
Quantidade do item()
esse.totalPrice = this.itemQuantity * isto.Preço do item;
console.log (isso.Quantidade do item);

Agora, sempre que o usuário mudar a “ItemQuantity”, o preço total será alterado em um momento. Não precisamos mais nos preocupar com nada. A propriedade Watch cuidará deste cálculo agora.

Vamos dar uma olhada na página da web:

E vamos tentar aumentar ou mudar a quantidade e ver alguns resultados:

Se mudarmos a quantidade, digamos "4", o preço total seria "800":

Da mesma forma, se mudarmos a quantidade para "7", o preço total seria "1400":

Então, é assim que a propriedade Watch funciona e ajuda no desenvolvimento reativo. A reatividade é uma espécie de assinatura de vue.JS. Além disso, a propriedade Watch é útil ao executar operações assíncronas.

Conclusão

Neste artigo, aprendemos o que é uma propriedade Watch e como podemos usá -la em vue.JS. Também tentamos um exemplo da vida real para entender sua verdadeira implementação. Isso ajuda muito a economizar tempo e acelerar o processo de desenvolvimento. Esperamos que você tenha achado este artigo útil e continue visitando Linuxhint.com para melhor compreensão.