Watchers Vue программно наблюдают за данными компонентов и запускаются всякий раз, когда изменяется конкретное свойство. Наблюдаемые данные могут содержать два аргумента: oldVal и newVal. Wather могут наблюдать за объектами, а также за другими типами, такие как строки, числа и массивы.
В предыдущих статьях мы использовали жизненные циклы компонентов, которые запускаются в определенное время в течение жизни компонента. Если для наблюдателя установлено значение true, а затем, когда этот компонент инициализируется, он будет запускать этот наблюдатель при создании.
watch: {
myDataProperty: {
handler: function(newVal, oldVal) {
console.log('myDataProperty changed:', newVal, oldVal)
},
immediate: true,
deep: true
},
}Здесь приведен простой вотчер переменной myDataProperty, т.е при создании watch, вы должны указать его название, которое будет = имени переменной, за которой вы хотите следить.
В свойстве handler, вы передаете функцию, где аргументы - newVal и oldVal - являются новым и старым значением переменной.
immediate: true - означает, что watcher будет работать сразу, т.е. первый его запуск будет произведен при загрузке компонента, по умолчанию - false, и в таком случае watch сработает только при изменении значения.
watchпо умолчанию анализирует данные - не глубоко: обратный вызов срабатывает только тогда, когда отслеживаемому свойству было присвоено новое значение — он не срабатывает при изменении вложенных свойств. Если вы хотите, чтобы обратный вызов запускался для всех вложенных мутаций, вам нужно использовать глубокий наблюдатель:
deep: true
Но данное наблюдение будет использовать больше ресурсов, потому при использовании слежения за большими данными, следует быть осторожным, чтобы не навредить скорости приложения.
Просмотр вложенных свойств
При использовании watch, вы можете наблюдать изменения вложенных свойств объекта, а не наблюдать за изменениями в самом объекте.
Это делается путем установки для необязательного свойства deep значения true:
data() {
return {
organization: {
name: 'ABC',
employees: ['Jack', 'Jill']
}
}
},
watch: {
organization: {
handler(v) {
this.sendIntercomData()
},
deep: true,
immediate: true,
},
},Этот пример кода демонстрирует, как мы наблюдаем за всеми доступными ключами внутри organization. Например, если свойство name внутри organization изменится, сработает handler.
В следующем примере watch явно наблюдает за ключом name объекта organization, мы явно указываем свойство - 'organization.name':
data() {
return {
organization: {
name: 'ABC',
employees: ['Jack', 'Jill']
}
}
},
watch: {
'organization.name': {
handler: function(v) {
this.sendIntercomData()
},
immediate: true,
},
},