Watchers
позволяют заглянуть в систему реактивности
Watchers: позволяют наблюдать за любым свойством, хранимом Vue. Если нам нужно добавить какую-либо функциональность при определенном изменении, можно следить за свойством и применять логику. То есть имя наблюдателя должно совпадать с тем, за чем мы наблюдаем.
Хотя в большинстве случаев лучше использовать вычисляемые свойства, иногда необходимы пользовательские методы-наблюдатели. Поэтому Vue предоставляет более общий способ реагирования на изменения в данных через опцию watch. Эта возможность полезна для «дорогих» или асинхронных операций, выполняемых в ответ на изменение данных.
Важные моменты по работе с watch
- Имя наблюдателя должно совпадать с именем переменной за которой мы следим
- Watch отрабатывает при каждом изменении наблюдаемой переменной поэтому желательно сравнивать oldVal и newVal чтобы понимать что изменения действительно были
- Старайтесь использовать watch только в случае если не смогли обойтись computed
Из примеров кода выше видно, что watch следит за переменной и в случае ее изменения запускает коллбэк который принимает 2 параметра - старое значение и новое значение, они часто бывают полезны для сравнения между собой, это позволяет понять что значение поменялось (а не было заменено на то же самое), при желании можно писать коллбэк без этих параметров, если они не используются.
По своей сути watcher запускает функцию при изменении отслеживаемой переменной.
На человеческом языке это может звучать так: Запусти функцию checkValidationForm при любом изменении переменной email