Что такое '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);
  }
}

Основные отличия

Используйте computed для получения реактивных данных, являющихся производными от других данных. Используйте watch для выполнения побочных эффектов (например, вызовов API, изменения DOM), когда значение реактивного свойства изменяется, или для выполнения более сложных логических реакций.