Vue watch. Слежка за уровнем данных.

Как следить за уровнем данных Vue

Когда мы разрабатываем наши компоненты, часто бывает нужно следить за уровнем данных. В тот момент, когда меняется какой-то ключ на этом уровне данных, выполнять какие-то действия. 

Здесь у нас есть несколько вариантов, как мы можем решить эту задачу. Стандартный вариант, который мы уже с вами знаем, мы можем воспользоваться методами и навешать каждый метод на все элементы за которыми мы хотим следить. 

Например, у нас есть ключ number на уровне данных

<template>

    <div>

        <input v-model="number">

    </div>

</template>




<script>

export default {

  name: "mainVue",

  data() {

    return {

      number: 1

    }

  }

}

</script>

Внутри методов, допустим, у нас есть какие-то действия, которые изменяют number. Нам придётся писать эту логику для события change для input

<input v-model="number" @change="...">

 и в каких-то других методах. Появляются некие сложности.

Альтернатива событиям и методам. Watch.

Во vue есть элегантное решение, как вы можете упростить эту задачу слежки за состоянием какого-то ключа на уровне данных.

Для этого во Vue есть специальная опция, которая называется watch. 

watch - это "следить" переводится с английского. Её задача следить за состоянием какого-то ключа и в момент того, когда это состояние будет меняться, оно будет выполнять какой-то набор действий. 

Как это работает? Мы должны с вами в нашем компоненте прописать отдельный ключ, который называется watch. Пишется он также, как методы. 

Watch двоеточие и здесь мы пишем наши watchers. Watchers представляет собой название ключа, за которым мы хотим следить.

watch: {

 number(val1, val2) {}

}

Если ключ у нас называется number, то мы здесь точно также пишем number.

 watcher принимает несколько значений val1 и val2. 

Давайте посмотрим, что будет в каждом из этих ключей. Давайте change уберём чтобы он нам не мешался и я попробую теперь поменять значение для нашего текстового поля.

Первым аргументом у нас приходит в watch новое значение, а вторым аргументом приходит старое значение, которое было у ключа до этого. 

Итого будет:

number(valNew, valOld) {}

Если вам нужно выполнять какие-то действия в зависимости от того, какое было старое значение, вы тоже можете это с помощью watcher отследить. Что не позволит вам реализовать такое же при использования, допустим методов для отслеживания. 

Преимущество watch

Вот такой полезный инструмент, который позволяет следить за любым ключом, который у нас есть на уровне данных и выполнять какой-то набор действий. 

Самое важное, что мы можем видеть и новое и старое значение, которое было для нашего ключа за которым мы следим и это добавляет гибкость.

Часто watch используются для сохранения данных формах. Позже мы посмотрим пример того, как это а выглядит, как можно для веб-форм использовать watch более удобно, чтобы следить за их изменением. Такая полезная опция watch. Имейте её в виду и используйте в своей работе.