Какво са 'watch' и 'computed' във Vue.js и как работят?

наблюдатели (watch)

• Използва се за реакция при промяна на конкретно реактивно свойство.
• Позволява изпълнение на асинхронни операции, забавяне на изпълнението или извършване на сложни изчисления, когато стойността на свойството се променя.
• Настройва се с помощта на опцията watch вътре в компонента.
• Може да има параметри handler (функция-обработчик), deep (дълбоко наблюдение на вложени обекти/масиви) и immediate (изпълнение на обработчика при създаване на компонента).

Пример:

watch: {
  // Наблюдава за промяна на свойството `firstName`
  firstName(newValue, oldValue) {
    console.log(`Името се промени от ${oldValue} на ${newValue}`);
  },
  // Дълбоко наблюдава обекта `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Информацията за потребителя е променена.');
    },
    deep: true
  }
}

computed (изчисляеми свойства)

• Използва се за декларативно създаване на зависими реактивни данни.
• Резултатът се кешира, докато не се променят неговите реактивни зависимости.
• Изчислява се лениво, само когато се обръща внимание на него.
• Настройва се с помощта на опцията computed вътре в компонента.
• Трябва да връща стойност.

Пример:

computed: {
  // Изчислява пълното име въз основа на firstName и lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Филтрира списъка с потребители
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Основни разлики

Признак	watch	computed
Назначение	Реагира на промяна на свойството	Изчислява зависими данни
Кеширане	Не	Да (по зависимости)
Ленива	Не	Да
Return-стойност	Не (извършва страничен ефект)	Да (връща изчислена стойност)
Асинхронност	Да	Не
Синтаксис	Обект с функции-обработчици	Обект с функции, връщащи стойност

Използвайте computed за получаване на реактивни данни, които са производни от други данни. Използвайте watch за изпълнение на странични ефекти (например, извиквания на API, промени в DOM), когато стойността на реактивното свойство се променя, или за изпълнение на по-сложни логически реакции.