Vue3 watch函数详解

基础使用方式

观察响应式依赖（数据），当依赖发生变化时，将会触发函数执行。

<script>
  import { createComponent, watch, ref } from '@vue/composition-api'
  export default createComponent({
    setup() {
      const count = ref(0)

      watch(() => console.log(count.value))
      // -> logs 0

      setTimeout(() => {
        count.value++
        // -> logs 1
      }, 1000)
    }
  })
</script>

观察一个源对象

如果需要获取观察源对象变化的新值和旧值，可以提供一个回调函数，它接收两个可选参数，第 1 个是新值，第 2 个是旧值。

<script>
  import { createComponent, watch, reactive } from '@vue/composition-api'
  export default createComponent({
    setup() {
      // 观察reactive
      const state = reactive({ count: 0 })
      watch(
        () => state.count,
        (count, prevCount) => {
          console.log(count)
          console.log(prevCount)
        }
      )

      setTimeout(() => {
        state.count++
      }, 1000)
    }
  })
</script>

• 观察一个 ref 对象

<script>
  import { createComponent, watch, ref } from '@vue/composition-api'
  export default createComponent({
    setup() {
      //直接观察 ref
      const count = ref(0)
      watch(count, (count, prevCount) => {
        console.log(count)
        console.log(prevCount)
      })

      setTimeout(() => {
        count.value++
      }, 1000)
    }
  })
</script>

观察多个源

reactive 和 ref 都是可以被观察的，可以使用数组的方式，来同时观察多个源。

<script>
  import { createComponent, watch, ref } from '@vue/composition-api'
  export default createComponent({
    setup() {
      const fooRef = ref(0)
      const barRef = ref(0)

      watch([fooRef, barRef], (currArr, prevArr) => {
        console.log(currArr, 'newValue')
        console.log(prevArr, 'oldValue')
      })

      // or
      watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
        /****/
      })

      setTimeout(() => {
        fooRef.value++
        barRef.value++
        /* 打印
         * [1,1] "newValue"
         * [0,0] "oldvalue"
         */
      }, 1000)
    }
  })
</script>

关闭 watch

watch 被创建时，会返回一个关闭函数，可以用该函数关闭一个 watch。

<script>
  import { createComponent, watch, ref } from '@vue/composition-api'
  export default createComponent({
    setup() {
      const count = ref(0)

      const stop = watch(() => console.log(count.value))

      stop() //关闭该观察者

      setTimeout(() => {
        // 更改count的值，但是不会触发观察者。
        count.value++
      }, 1000)
    }
  })
</script>

懒调用

使用前面的示例可以看到，观察者第一次被创建都会去触发一遍回调函数，假如需要当值被改变时才触发观察者，可以加入lazy配置。

<script>
  import { createComponent, watch, ref } from '@vue/composition-api'
  export default createComponent({
    setup() {
      const count = ref(0)

      // 第一次执行不会打印
      watch(count, value => console.log(value), { lazy: true })

      setTimeout(() => {
        count.value++
        // -> logs 1
      }, 1000)
    }
  })
</script>