Что такое 'watch' и 'computed' в Vue.js, и как они работают?

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

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

Пример:

javascript

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

• Используется для декларативного создания зависимых реактивных данных.
• Результат кэшируется до тех пор, пока не изменятся его реактивные зависимости.
• Вычисляется лениво, только когда к нему обращаются.
• Настраивается с помощью опции computed внутри компонента.
• Должен возвращать значение.

Пример:

javascript

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

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