Vue calculadas estructuras profundas

Cuando se trata del cálculo de tipos de datos anidados o profundos como matrices u objetos, vue.JS o cualquier otro lenguaje de programación no detecta automáticamente el cambio jerárquico en los datos. Sin embargo, todos sabemos que vue.JS proporciona el reloj y las propiedades calculadas para realizar algunas variables de cambio. Pero cuando se trata de cambios de datos anidados, vue.JS no detecta eso. Esta publicación aprenderá a realizar algunos cambios observando los datos anidados de matrices u objetos.

Antes de aprender sobre ver datos anidados en Vue.JS, primero entendamos cómo funciona la propiedad de reloj?

Ver la propiedad

La propiedad de reloj se usa para ver una variable y permite al usuario realizar algunas tareas deseadas en el cambio de la variable.

Ejemplo: mira una variable

Por ejemplo, al cambio de alguna variable, queremos consolar algo. La sintaxis para escribir dicho código en Vue irá así:

Después de escribir el código anterior, la página web sería así.

Si hacemos clic en el botón, el estado del "boolvar" debe alterarse debido al atributo del botón en el clic, y el reloj debe detectar automáticamente el cambio en "boolvar" y mostrar la cadena de mensajes en la consola.

Funcionó perfectamente bien; El mensaje "Botón hecho clic" se muestra en la consola.

Pero, el observador no detecta el cambio y no se dispara cuando se trata de observar las matrices u objetos. Veamos una demostración de eso.

Ejemplo: ver un objeto

Supongamos que tenemos un objeto en nuestro componente, y queremos mostrar el cambio que ocurrió en la propiedad del objeto. En el ejemplo que se da a continuación, he creado un objeto con el nombre de "objvar", que contiene dos pares de valor clave, "elemento" y "cantidad". He creado un botón donde estoy agregando "1" a la cantidad de la etiqueta de plantilla. Por último, estoy viendo el objeto "objvar" en la propiedad del reloj y mostrando un mensaje de consola.

Ahora, se supone que este código muestra el cambio en la cantidad del objeto. Pero, cuando ejecutamos el código y hacemos clic en el botón en la página web:

Puedes ver en el GIF anterior; No pasa nada en la consola.

La razón detrás de esto es que el observador no mira profundamente los valores de los objetos, y este es el verdadero problema al que vamos a resolver ahora.

Vue.JS proporciona la propiedad profunda para observar en los valores de los objetos y matrices. La sintaxis para usar la propiedad profunda y ver los datos anidados es la siguiente:

En esta sintaxis, hemos establecido la propiedad profunda en verdadero y reorganizado la función de controlador ().

Ahora, después de cambiar el código, si recargamos la página web y hacemos clic en el botón:

Aquí puede ver que el observador está funcionando y mostrando el mensaje en la consola.

Conclusión

Después de leer esta publicación, observar y calcular estructuras de datos profundas o anidadas en Vue.JS ya no es difícil. Hemos aprendido cómo ver el cambio de un valor en un objeto o matriz y ejecutar algunas tareas con la ayuda de la propiedad "profunda" de Vue.js.