$watch

2023年05月08日

柏拉文

越努力，越幸运

一、认识

---

$watch()​ 用于命令式地创建侦听器的 API。

二、语法

---

this.$watch(
    source,
    ()=>{

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

// 侦听一个属性名
this.$watch('a', (newVal, oldVal) => {})

// 侦听一个由 . 分隔的路径
this.$watch('a.b', (newVal, oldVal) => {})

// 对更复杂表达式使用 getter 函数
this.$watch(
  // 每一次这个 `this.a + this.b` 表达式生成一个
  // 不同的结果，处理函数都会被调用
  // 这就好像我们在侦听一个计算属性
  // 而不定义计算属性本身。
  () => this.a + this.b,
  (newVal, oldVal) => {}
)


// 停止该侦听器
const unwatch = this.$watch('a', cb)
unwatch()

• source: 侦听来源。可以是一个组件的属性名的字符串，一个简单的由点分隔的路径字符串，或是一个 getter 函数。

• callback: 回调函数,它接收的参数分别是侦听来源的新值、旧值。

• options:

  • immediate: 指定在侦听器创建时是否立即触发回调。在第一次调用时旧值为 undefined。

  • deep: 指定在侦听来源是一个对象时，是否强制深度遍历，这样回调函数就会在深层级发生变更时被触发。

  • flush: 指定回调函数的刷新时机。

  • onTrack / onTrigger: 调试侦听器的依赖