Vue computou estruturas profundas

Quando se trata do cálculo de tipos de dados aninhados ou profundos, como matrizes ou objetos, vue.JS ou qualquer outra linguagem de programação não detecta automaticamente a mudança hierárquica nos dados. No entanto, todos sabemos que vue.O JS fornece o relógio e as propriedades calculadas para realizar algumas variáveis ​​de mudança. Mas quando se trata de mudanças de dados aninhadas, vue.JS não detecta isso. Esta postagem aprenderá a realizar algumas mudanças assistindo aos dados aninhados de matrizes ou objetos.

Antes de aprender sobre assistir dados aninhados em vue.JS, vamos primeiro entender como a propriedade Watch funciona?

Assista à propriedade

A propriedade Watch é usada para assistir a uma variável e permite ao usuário executar algumas tarefas desejadas na mudança da variável.

Exemplo: assista a uma variável

Por exemplo, com a mudança de alguma variável, queremos consolar algo. A sintaxe para escrever esse código em Vue será assim:

Depois de escrever o código acima, a página da web seria assim.

Se clicarmos no botão, o estado do "boolvar" deve ser alterado devido ao atributo no clique do botão, e o relógio deve detectar automaticamente a mudança em "boolvar" e exibir a sequência de mensagens no console.

Funcionou perfeitamente bem; A mensagem "Button Clicked" é exibida no console.

Mas, o observador não consegue detectar a mudança e não é demitido quando se trata de assistir as matrizes ou objetos. Vamos ver uma demonstração disso.

Exemplo: assistir a um objeto

Suponha que tenhamos um objeto em nosso componente e queremos exibir a alteração que aconteceu na propriedade do objeto. No exemplo dado abaixo, criei um objeto com o nome de "Objvar", que contém dois pares de valor-chave, "Item" e "Quantidade". Eu criei um botão onde estou adicionando "1" à quantidade da tag de modelo. Por fim, estou assistindo o objeto "Objvar" na propriedade Watch e exibindo uma mensagem de console.

Agora, este código deve exibir a mudança na quantidade do objeto. Mas, quando executamos o código e clique no botão na página da web:

Você pode ver no GIF acima; Nada está acontecendo no console.

A razão por trás disso é que o observador não parece profundamente nos valores dos objetos, e esse é o verdadeiro problema para o qual vamos resolver agora.

Vue.JS fornece a propriedade profunda para assistir no fundo dos valores de objetos e matrizes. A sintaxe para usar a propriedade Deep e assistir aos dados aninhados é os seguintes:

Nesta sintaxe, estabelecemos a propriedade profunda como verdadeira e reorganizamos a função Handler ().

Agora, depois de alterar o código, se recarregamos a página da web e clique no botão:

Aqui você pode ver que o observador está funcionando e exibindo a mensagem no console.

Conclusão

Depois de ler este post, assistir e calcular estruturas de dados profundas ou aninhadas em Vue.JS não é mais difícil. Aprendemos a observar a mudança de um valor em um objeto ou matriz e executar algumas tarefas com a ajuda da propriedade "profunda" da VUE.JS.