Phenquestions
Що стосується обчислення вкладених або глибоких типів даних, таких як масиви або об'єкти, Vue.js або будь-яка інша мова програмування не визначає автоматично ієрархічну зміну даних. Однак ми всі знаємо, що Vue.js надає спостереження та обчислювані властивості для виконання деяких змінних змін. Але коли справа стосується вкладених змін даних, Vue.js цього не виявляє. Ця публікація навчиться виконувати деякі зміни, переглядаючи вкладені дані масивів або об’єктів.
Перш ніж дізнатися про перегляд вкладених даних у Vue.js, давайте спочатку розберемося, як працює властивість годинника?
Властивість годинника
Властивість watch використовується для перегляду змінної і дозволяє користувачеві виконувати деякі бажані завдання при зміні змінної.
Приклад: Дивіться змінну
Наприклад, при зміні якоїсь змінної ми хочемо щось втішити. Синтаксис для написання такого коду у Vue матиме такий вигляд:
Це сторінка тестування
Після написання вищевказаного коду веб-сторінка буде такою.
Якщо ми натиснемо кнопку, стан "boolVar" повинен бути змінений через атрибут кнопки при натисканні кнопки, а годинник повинен автоматично виявити зміну в "boolVar" і відобразити рядок повідомлення на консолі.
Це працювало чудово; на консолі відображається повідомлення “Кнопка натиснута”.
Але спостерігач не виявляє змін і не звільняється, коли справа доходить до спостереження за масивами або об’єктами. Побачимо демонстрацію цього.
Приклад: Спостереження за Об’єктом
Припустимо, у нас є об’єкт у нашому компоненті, і ми хочемо відобразити зміни, що відбулись у властивості об’єкта. У наведеному нижче прикладі я створив об’єкт з ім’ям „objVar”, який містить дві пари ключ-значення, „item” та „quantity”. Я створив кнопку, де додаю “1” до кількості тегу шаблону. Нарешті, я спостерігаю за об’єктом “objVar” у властивості watch та відображаю повідомлення консолі.
Це сторінка тестування
Тепер цей код повинен відображати зміну кількості об’єкта. Але коли ми виконуємо код і натискаємо кнопку на веб-сторінці:
Ви можете побачити у наведеному вище gif; у консолі нічого не відбувається.
Причиною цього є те, що спостерігач не заглиблюється у значення об’єктів, і це справжня проблема, яку ми збираємось вирішити зараз.
Vue.js надає властивість deep для перегляду глибоких значень об'єктів та масивів. Синтаксис використання властивості deep та перегляду вкладених даних такий:
У цьому синтаксисі ми встановили для властивості deep значення true та переставили функцію handler ().
Тепер, після зміни коду, якщо ми перезавантажимо веб-сторінку та натиснемо на кнопку:
Тут ви можете побачити, що спостерігач працює і відображає повідомлення на консолі.
Висновок
Після прочитання цієї публікації, перегляду та обчислення глибоких або вкладених структур даних у Vue.js вже не складно. Ми дізналися, як спостерігати за зміною значення в об’єкті чи масиві та виконувати деякі завдання за допомогою властивості Vue “deep”.js.
