Vue.js $watch()用法及代码示例

用于创建观察者的命令式 API。

类型

interface ComponentPublicInstance {
  $watch(
    source: string | (() => any),
    callback: WatchCallback,
    options?: WatchOptions
  ): StopHandle
}

type WatchCallback<T> = (
  value: T,
  oldValue: T,
  onCleanup: (cleanupFn: () => void) => void
) => void

interface WatchOptions {
  immediate?: boolean // default: false
  deep?: boolean // default: false
  flush?: 'pre' | 'post' | 'sync' // default: 'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}

type StopHandle = () => void

细节

第一个参数是监视源。它可以是组件属性名称字符串、简单的dot-delimited 路径字符串或getter 函数。

第二个参数是回调函数。回调接收监视源的新值和旧值。

immediate：在观察者创建时立即触发回调。旧值将是undefined在第一次调用。
deep：如果源是对象，则强制深度遍历源，以便回调触发深度突变。看深度观察者.
flush：调整回调的刷新时间。看回调刷新时间.
onTrack / onTrigger: 调试观察者的依赖。看观察者调试.

示例

观察一个属性名称：

this.$watch('a', (newVal, oldVal) => {})

观看 dot-delimited 路径：

this.$watch('a.b', (newVal, oldVal) => {})

对更复杂的表达式使用 getter：

this.$watch(
  // every time the expression `this.a + this.b` yields
  // a different result, the handler will be called.
  // It's as if we were watching a computed property
  // without defining the computed property itself.
  () => this.a + this.b,
  (newVal, oldVal) => {}
)

停止观察者：

const unwatch = this.$watch('a', cb)

// later...
unwatch()

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 $watch()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。