Estructuras profundas computadas por Vue

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 a ver datos anidados en Vue.js, primero comprendamos cómo funciona la propiedad del reloj?

Ver propiedad

La propiedad de observación se utiliza para observar una variable y permite al usuario realizar algunas tareas deseadas en el cambio de la variable.

Ejemplo: ver una variable

Por ejemplo, al cambiar alguna variable, queremos consolar algo. La sintaxis para escribir dicho código en Vue será la siguiente:

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

Si hacemos clic en el botón, el estado del "boolVar" debería modificarse debido al atributo al hacer clic del botón, y el reloj debería detectar automáticamente el cambio en "boolVar" y mostrar la cadena del mensaje en la consola.

Funcionó perfectamente bien; el mensaje "Botón pulsado" se muestra en la consola.

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

Ejemplo: observar 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 muestra a continuación, he creado un objeto con el nombre de "objVar", que contiene dos pares clave-valor, "artículo" y "cantidad". Creé un botón en el que agrego "1" a la cantidad de la etiqueta de la 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 de 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 profundiza en los valores de los objetos, y este es el problema real que vamos a resolver ahora.

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

En esta sintaxis, hemos establecido la propiedad deep en true y reorganizamos la función handler ().

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á trabajando y mostrando el mensaje en la consola.

Conclusión

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