vm.$watch

vm.$watch( expOrFn, callback, [options] )

Аргументы:

• {string | Function} expOrFn

• {Function | Object} callback

• {Object} [options]

  • {boolean} deep

  • {boolean} immediate

Возвращает: {Function} unwatch

Использование:

Запускает наблюдение за выражением или вычисляемой функцией на предмет изменений. В параметры коллбэка будут переданы новое и старое значения отслеживаемого объекта. Выражение может быть только простым путём до переменной с разделителями-точками. Для более сложных случаев используйте функцию.

Обратите внимание: когда изменяете (а не заменяете) объект или массив, старое и новое значения при вызове коллбэка будут совпадать, так как они ссылаются на один и тот же объект или массив. Vue не сохраняет копии объекта на момент, предшествовавший изменениям.

Пример:

// следим за переменной, указанной путём:
vm.$watch('a.b.c', function (newVal, oldVal) {
  // переменная изменилась, сделайте что-нибудь
})

// следим за функцией:
vm.$watch(
  function () {
    // Данный обработчик будет вызываться каждый раз, когда выражение
    // `this.a + this.b` даёт результат. Это похоже на отслеживание
    // вычисляемого свойства без определения самого вычисляемого свойства
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // значение функции изменилось, сделайте что-нибудь
  }
)

vm.$watch возвращает функцию unwatch, которая останавливает слежение:

const unwatch = vm.$watch('a', cb)
// позднее, останавливаем слежение:
unwatch()

Опция: deep

Чтобы слежение реагировало на изменения во вложенных объектах, передайте deep: true в объекте параметров. Обратите внимание, что для наблюдения за изменениями массивов этого не требуется.

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// вызывается callback

Опция: immediate

Если передано immediate: true, коллбэк будет вызван сразу же после начала наблюдения с текущим значением выражения:

vm.$watch('a', callback, {
  immediate: true
})
// `callback` вызывается сразу, с текущим значением `a`

Обратите внимание, при использовании опции immediate нет возможности отменить отслеживание указанного свойства в коллбэке вызванном в первый раз.

// Подобное приведёт к ошибке
const unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

Если необходимо вызвать функцию unwatch внутри коллбэка, то следует проверять её доступность:

const unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)