Vue Computed Deep Structures

Quando se trata de computação de tipos de dados aninhados ou profundos, como matrizes ou objetos, o Vue.js ou qualquer outra linguagem de programação não detecta automaticamente a mudança hierárquica nos dados. No entanto, todos nós sabemos que Vue.js fornece o relógio e as propriedades computadas para realizar algumas variáveis ​​de mudança. Mas quando se trata de alterações de dados aninhados, o Vue.js não detecta isso. Esta postagem aprenderá a realizar algumas mudanças observando os dados aninhados de matrizes ou objetos.

Antes de aprender a observar dados aninhados no Vue.js, vamos primeiro entender como funciona a propriedade watch?

Propriedade do relógio

A propriedade watché usada para observar uma variável e permite ao usuário realizar algumas tarefas desejadas na mudança da variável.

Exemplo: observe uma variável

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

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

Se clicarmos no botão, o estado de “boolVar” deve ser alterado devido ao atributo ao clicar do botão, e o relógio deve detectar automaticamente a mudança em “boolVar” e exibir a string de mensagem no console.

Funcionou perfeitamente bem; a mensagem “Botão clicado” é exibida no console.

Mas, o observador falha em detectar a mudança e não é acionado quando se trata de observar as matrizes ou objetos. Vamos ver uma demonstração disso.

Exemplo: Assistindo a um objeto

Suponha que temos um objeto em nosso componente e queremos exibir a mudança que aconteceu na propriedade do objeto. No exemplo abaixo, criei um objeto com o nome de “objVar”, que contém dois pares de valores-chave, “item” e “quantidade”. Eu criei um botão onde estou adicionando “1” à quantidade da tag do modelo. Por último, estou observando 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 clicamos 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 olha profundamente nos valores dos objetos, e este é o problema real que vamos resolver agora.

Vue.js fornece a propriedade deep para observar profundamente os valores de objetos e matrizes. A sintaxe para usar a propriedade deep e observar os dados aninhados é a seguinte:

Nesta sintaxe, definimos a propriedade deep como true e reorganizamos a função handler ().

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

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

Conclusão

Depois de ler esta postagem, observar e calcular estruturas de dados profundas ou aninhadas no Vue.js não é mais difícil. Aprendemos como observar a mudança de um valor em um objeto ou array e executar algumas tarefas com a ajuda da propriedade "deep" de Vue.js.