Vue изчислява дълбоки структури

Що се отнася до изчисляването на вложени или дълбоки типове данни като масиви или обекти, Vue.js или който и да е друг език за програмиране не открива автоматично йерархичната промяна в данните. Всички обаче знаем, че Vue.js предоставя часовника и изчислените свойства за извършване на някои променливи промяна. Но когато става въпрос за вложени промени в данни, Vue.js не открива това. Тази публикация ще се научи да извършва някои промени, като гледа вложените данни на масиви или обекти.

Преди да научите за гледане на вложени данни във Vue.js, нека първо разберем как работи свойството на часовника?

Гледайте собственост

Свойството watch се използва за гледане на променлива и позволява на потребителя да изпълнява някои желани задачи при промяната на променливата.

Пример: Гледайте променлива

Например при промяната на дадена променлива искаме да утешим нещо. Синтаксисът за писане на такъв код във Vue ще върви по следния начин:

След написването на горния код уеб страницата ще бъде такава.

Ако щракнем върху бутона, състоянието на „boolVar“ трябва да бъде променено поради атрибута на бутона при щракване, а часовникът трябва автоматично да открие промяната в „boolVar“ и да покаже низа на съобщението на конзолата.

Работеше напълно добре; на конзолата се показва съобщението „Щракнат бутон“.

Но наблюдателят не успява да засече промяната и не се уволнява, когато става въпрос за наблюдение на масиви или обекти. Нека да видим демонстрация на това.

Пример: Гледане на обект

Да предположим, че имаме обект в нашия компонент и искаме да покажем промяната, която се е случила в свойството на обекта. В примера, даден по-долу, създадох обект с името „objVar“, който съдържа две двойки ключ-стойност, „артикул“ и „количество“. Създадох бутон, където добавям „1“ към количеството на маркера на шаблона. И накрая, наблюдавам обекта „objVar” в свойството на часовника и показвам конзолно съобщение.

Сега този код трябва да показва промяната в количеството на обекта. Но когато изпълним кода и щракнем върху бутона на уеб страницата:

Можете да видите в горния gif; нищо не се случва в конзолата.

Причината зад това е, че наблюдателят не се вглежда дълбоко в стойностите на обектите и това е истинският проблем, на който ще решим сега.

Vue.js предоставя свойството deep за гледане в дълбочина на стойностите на обектите и масивите. Синтаксисът за използване на свойството deep и наблюдение на вложените данни е както следва:

В този синтаксис сме задали свойството deep на true и сме пренаредили функцията handler ().

Сега, след промяна на кода, ако презаредим уеб страницата и кликнете върху бутона:

Тук можете да видите, че наблюдателят работи и показва съобщението в конзолата.

Заключение

След като прочетете тази публикация, гледате и изчислявате дълбоки или вложени структури от данни във Vue.js вече не е трудно. Научихме как да наблюдаваме промяната на стойност в обект или масив и да изпълняваме някои задачи с помощта на свойството “дълбоко” на Vue.js.