Свойство watch в Vue3

Vue3 选项式 APIVue3 Options API

В Vue3,watchСвойство используется для прослушивания изменений фрагмента данных в экземпляре Vue и выполнения соответствующей функции обратного вызова при изменении данных.

watchОно позволяет нам наблюдать за изменениями определённых данных в экземпляре Vue и реагировать на них, выполняя тем самым некоторые побочные эффекты, такие как обновление DOM, выполнение сетевых запросов и т. д.

2. Базовое использование свойства watch

В Vue3,watchсвойство можно использовать следующими способами:

Пример

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue}to ${newValue}`);
    });

    return {
      count
    };
  }
};

3. Объяснение кода

В приведённом выше коде:

  • Сначала мы используемrefчтобы создать реактивные данныеcount, и устанавливаем его начальное значение равным 0.
  • Затем мы используемwatchфункцию для отслеживанияcountизменений.watchпринимает два параметра:
    • Первый параметр — это данные, которые мы хотим отслеживать (здесь этоcount）。
    • Второй параметр — это функция обратного вызова, которая будет вызвана при изменении отслеживаемых данных. Функция обратного вызова принимает два параметра:
      • newValue: новое значение после изменения данных.
      • oldValue: старое значение до изменения данных.

4. Расширенное использование свойства watch

Помимо отслеживания одного элемента данных,watchвы также можете отслеживать несколько элементов данных или отслеживать сложное выражение.

4.1 Отслеживание нескольких элементов данных

Пример

import { ref, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`firstName изменено с ${oldFirstName}на ${newFirstName}`);
      console.log(`lastName изменено с ${oldLastName}на ${newLastName}`);
    });

    return {
      firstName,
      lastName
    };
  }
};

В этом примере мы отслеживалиfirstNameиlastNameизменения в двух данных. Когда изменяется любое из них, срабатывает функция обратного вызова.

4.2 Отслеживание сложных выражений

Пример

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Alice',
      age: 25
    });

    watch(
      () => user.value.age, // Отслеживать изменения user.age
      (newAge, oldAge) => {
        console.log(`возраст изменился с ${oldAge}до ${newAge}`);
      }
    );

    return {
      user
    };
  }
};

В этом примере мы используем функцию для отслеживанияuser.ageизменений. Этот подход подходит для отслеживания свойства внутри объекта.

5. Параметры свойства watch

watchФункция также принимает третий параметр — необязательный объект конфигурации, который можно использовать для настройки поведения отслеживания.

Пример

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue}to ${newValue}`);
    }, {
      immediate: true, // Выполнить функцию обратного вызова немедленно
      deep: true // Глубокое отслеживание, подходит для отслеживания объектов или массивов
    });

    return {
      count
    };
  }
};
  • immediate: true: указывает, что функция обратного вызова выполняется сразу при запуске прослушивания, а не ожидает, пока данные изменятся.
  • deep: true: указывает на глубокое прослушивание, подходящее для отслеживания изменений в объектах или массивах.

Vue3 选项式 APIVue3 Options API

Другие расширения