Вложенные изменения в Vue: как их остерегаться
9 мая 2022 г.Vue — это реактивный язык, то есть когда данные изменяются, мы можем автоматически отображать их в HTML. Чтобы помочь нам в этом, мы можем использовать наблюдатели в vue, чтобы следить за изменением данных, а затем делать что-то, чтобы HTML или отправить сообщение пользователю об этом.
Это прекрасно работает для простых наборов данных, но если у нас начинаются данные глубже одного уровня, становится сложнее правильно отслеживать изменения.
Отслеживание изменений вложенных данных в Vue
Чтобы немного разобраться в этом вопросе, нам нужно понять, как работают наблюдатели в Vue. Vue отслеживает только поверхностные изменения. Например, ниже мы отслеживаем изменения в count и console.log эти изменения:
```html
<скрипт>
экспорт по умолчанию {
данные() {
возврат {
количество: 1
смотреть: {
количество (данные) {
console.log(данные);
<шаблон>
{{ количество }}
<кнопка @click="++this.count">
Нажми на меня
Каждый раз, когда пользователь нажимает на кнопку, мы ++this.count, и наш наблюдатель отслеживает любые изменения в count. Затем «консоль» регистрирует данные, чтобы мы могли видеть новое значение счетчика. Это означает, что каждый раз, когда нажимается кнопка, значение count отображается в журнале консоли.
Однако поверхностные изменения означают, что Vue проверяет только изменения в значении этого свойства. Если у нас есть данные более чем на один уровень глубины, Vue не будет проверять наличие обновлений. Например, обновление count.number ниже не вызовет срабатывания нашего наблюдателя для count, поскольку Vue просто не проверяет никаких изменений глубже, чем count:
```javascript
данные() {
возврат {
считать: {
номер 1,
тип: 'число'
смотреть: {
// Это не срабатывает, когда count.number!
количество (данные) {
console.log(данные);
Вместо этого нам нужно конкретно указать, какой элемент изменяется. Мы можем продолжать следить за изменениями в count.number выше, изменив наш наблюдатель, чтобы он следил за count.number:
```javascript
данные() {
возврат {
считать: {
номер 1,
тип: 'число'
смотреть: {
// Это срабатывает при изменении count.number!
"count.number": функция (данные) {
console.log(данные);
Используя описанный выше метод, мы можем легко проверить изменения в свойствах внутри свойств, чтобы мы могли активировать соответствующие наблюдатели, но это может привести к путанице. Если мы хотим просто следить за любыми изменениями count, нам нужно использовать свойство deep.
Использование свойства deep
Свойство deep может быть добавлено к любому наблюдателю, и оно заставляет Vue отслеживать любые изменения в определенном свойстве данных. Это означает, что мы должны написать наш наблюдатель немного по-другому:
```javascript
данные() {
возврат {
считать: {
номер 1,
тип: 'число'
смотреть: {
считать: {
обработчик (данные) {
console.log(данные);
глубоко: правда
Теперь всякий раз, когда изменяется какое-либо свойство внутри count, срабатывает наблюдатель count. Когда мы на этот раз console.log(data), весь объект count будет зарегистрирован в консоли, то есть { number: 1, type: 'number' }.
Это намного проще, чем нацеливание на конкретные свойства внутри свойств, но это дорого. Поскольку Vue каждый раз должен просматривать каждое свойство, это может вызвать серьезные проблемы с производительностью для очень больших объектов. Таким образом, используйте это только в том случае, если у вас есть известный объект небольшого размера. В других ситуациях придерживайтесь целевых свойств, таких как count.number.
Первоначально опубликовано [здесь] (https://fjolt.com/article/vue-how-to-watch-for-nested-changes)
Оригинал