Что такое computed и watchers во Vue?

В Vue.js computed (вычисляемые свойства) и watchers (наблюдатели) используются для реактивного отслеживания изменений данных, но служат разным целям:

• Computed — это свойства, которые вычисляются на основе реактивных данных и автоматически кешируются. Они пересчитываются только тогда, когда зависящие от них данные изменяются. Используются для вычисления значений, которые зависят от других данных.

  Пример:

  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
  

  Здесь fullName будет автоматически обновляться, когда изменится firstName или lastName.

• Watchers — это функции, которые следят за изменениями конкретных данных и позволяют выполнять побочные эффекты (например, асинхронные операции, вызовы API) при изменении этих данных.

  Пример:

  watch: {
    searchQuery(newVal, oldVal) {
      this.fetchResults(newVal);
    }
  }
  

  Здесь при изменении searchQuery вызывается метод fetchResults.

Итого:

• Используйте computed для вычисления значений на основе реактивных данных.
• Используйте watchers для выполнения действий при изменении данных, особенно если нужны побочные эффекты.