Что такое watch

Question

Что такое watch

Тип вопроса: Vue Вероятность: 10% Категория: Frontend Разработчик

Ответ

watch в контексте Vue.js — это опция компонента, позволяющая отслеживать изменения определённых данных и выполнять функции при их изменении.

Пример:

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
}

Особенности:

Можно использовать для глубокого отслеживания объектов (deep: true).
Есть возможность немедленного вызова при создании компонента (immediate: true).
Альтернатива — computed свойства, если нужны производные данные.

В React аналогом будет useEffect с зависимостями.

Ответ 18+ 🔞

А, ну, смотри, этот самый watch в Vue — это как будто ты поставил суку-соседку следить за своей квартирой, пока ты на работе. Только соседка эта — не дура, она конкретно за определёнными вещами следит.

Вот объявил ты в data какую-нибудь переменную, ну, message там. И тебе надо, чтобы когда она меняется, что-то происходило. Не просто так, а с логикой, с выводом в консоль, запрос на сервер отправить — да хуй знает что. Вот для этого watch и есть.

Смотри, как это выглядит, чтоб не охуеть:

export default {
  data() {
    return {
      message: 'Hello' // Изначально тут "Hello"
    }
  },
  watch: {
    // А вот тут мы говорим: "Слушай, Vue, блядь, следи за 'message'!"
    message(newVal, oldVal) {
      // И как только эта сука поменялась — делай вот это:
      console.log(`Сообщение сменилось с ${oldVal} на ${newVal}`);
    }
  }
}

И вот ты потом в коде где-нибудь пишешь this.message = 'World', и тут же в консоли вылезает: "Сообщение сменилось с Hello на World". Магия, ёпта! Ну, не магия, а просто наблюдение, но всё равно приятно.

А теперь про фишки, без которых нихуя не понятно:

Глубокое наблюдение (deep: true). Это на случай, если твоя переменная — не строка, а целый объект, внутри которого ещё куча всего. По умолчанию watch сработает, только если ты присвоишь объекту новый объект. А если ты внутри него свойство поменял — нихуя. Чтобы он копал глубже, надо так:
```
watch: {
  myBigObject: {
    handler(newVal) { /* логика */ },
    deep: true // Теперь он будет охуевать от каждого чиха внутри объекта
  }
}
```
Сразу выполнить (immediate: true). Бывает нужно не ждать, пока значение поменяется, а запустить логику прямо при старте компонента. Ну, типа инициализация какая-то. Тогда:
```
watch: {
  myProp: {
    handler(newVal) { /* эта функция вызовется сразу при создании */ },
    immediate: true
  }
}
```
Чё не computed? — спросит дотошный. А я отвечу: computed — это когда тебе нужно вычислить новое значение на основе других (типа fullName из firstName и lastName). А watch — это когда тебе нужно совершить действие (сайд-эффект, блядь) при изменении. Записать в логи, отправить запрос, перенаправить пользователя. Понимаешь разницу? В computed ты получаешь значение, в watch — запускаешь процесс.

Ну и для полной картины, чтоб ты не ломал голову:
В React'е, если ты вдруг с него припёрся, похожая хуйня делается через хук useEffect, где в массив зависимостей эту самую переменную и засунешь. Но это уже совсем другая история, про которую можно охуеть не меньше.

Короче, watch — мощная хуйня. Главное — не навешивай слежку на всё подряд, а то компонент превратится в параноика, который за каждым чихом следит, и производительность накроется медным тазом. Используй с умом, ебать!