$watch

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

类型

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

type WatchCallback = (
  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

细节

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

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

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

例子

观察一个属性名称：

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

观察一个点分隔的路径：

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()

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com