概念

Vue3 的 watch 监听器与Vue2的watch配置功能一致，提供了基于观察状态的变化来执行副作用的能力。

功能

• 监视指定的一个或多个响应式数据， 一旦数据变化，就自动执行监视回调
• 默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次
• 通过配置deep为true，来指定深度监视

实例

<template>
  <div>
    <h1>Example Page</h1>
    <div>
      <p>count is: {{ count }}</p>
      <a-button @click="addHandle">修改</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { watch, ref, reactive } from 'vue'

export default {
  setup() {
    // 定义响应式数据count
    const count = ref(2)
    const addHandle = () => {
      count.value++
      num.count++
    }
    // 直接侦听一个 ref
    watch(count, (newValue, oldValue) => {
      // 监听count
      console.log(`newValue为：${newValue},---oldValue为：${oldValue}`)
    })
    // 侦听一个 getter
    const num = reactive({ count: 5 })
    watch(
      () => num.count,
      (newVal, prevVal) => {
        console.log(`newValue为：${newVal},---oldValue为：${prevVal}`)
      }
    )
    return {
      count,
      addHandle,
    }
  },
}
</script>

初始页面：

点击修改按钮之后：

深度监听、初始化立即执行

深度监听：通过配置deep为true，来指定深度监视
初始化立即执行：配置 immediate 为 true

实例

<template>
  <div>
    <h1>Example Page</h1>
    <div>
      <p>count is: {{ count }}</p>
      <a-button @click="addHandle">修改</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { watch, ref, reactive } from 'vue'

export default {
  setup() {
    // 定义响应式数据count
    const count = ref(2)
    const addHandle = () => {
      count.value++
    }
    /* 
    使用watch的2个特性:
      深度监视
      初始化立即执行
    */
    watch(
      count,
      (newValue, oldValue) => {
        // 监听count
        console.log(`newValue为：${newValue},---oldValue为：${oldValue}`)
      },
      {
        immediate: true, // 是否初始化立即执行一次, 默认是false
        deep: true, // 是否是深度监视, 默认是false
      }
    )

    return {
      count,
      addHandle,
    }
  },
}
</script>

初始页面即会执行一次监听：

点击修改按钮又一次执行监听：

同时监听多个数据

实例

<template>
  <div>
    <h1>Example Page</h1>
    <div>
      <p>count is: {{ count }}</p>
      <a-button @click="addHandle">修改</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { watch, ref } from 'vue'

export default {
  setup() {
    // 定义响应式数据count
    const count = ref(2)
    // 定义响应式数据num
    const num = ref(5)
    const addHandle = () => {
      count.value++
      num.value++
    }
    /* 
    watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
    watch(
      [() => count.value, () => num.value],
      ([count, num], [oldCount, oldNum]) => {
        // watch 同时观察count和num两个值
        console.log(
          `count:${count},num:${num} oldCount:${oldCount},oldNum:${oldNum}`
        )
      }
    )
    return {
      count,
      addHandle,
    }
  },
}
</script>

初始页面：

点击修改打印信息：