侦听器的类型

深层侦听

WARNING

• 深层侦听需要遍历对象中所有嵌套属性，对于大型数据结构，要注意性能开销。
• 在Vue 3.5+中，deep选项还支持数字类型，用于指定侦听的深度。

默认情况下，直接给watch传递一个响应式对象，会隐式创建深层侦听——即侦听对象内部的所有属性。

也可以显式使用deep选项来创建深层侦听。

查看示例

<template>
  <div class="div-box">
    <button @click="changeObj">changeObj</button>
    <button @click="replaceObj">replaceObj</button>
    <p>{{ isEqual }}</p>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
const isEqual = ref()
const obj = reactive({
  count: 0,
  someObj: {
    a: 1
  }
})

// 隐式深层监听：嵌套属性变更时触发
watch(obj, (newObj, oldObj) => {
  // 此处的 newObj 和 oldObj 是同一个对象
})

// 返回不同对象时触发
watch(
  () => obj.someObj,
  (newObj, oldObj) => {
    // 仅当 obj.someObj 被替换时触发
  }
)

const changeObj = () => obj.someObj.a++

const replaceObj = () => {
  obj.someObj = { a: obj.someObj.a + 1 }
}

// 强制深层监听
watch(
  () => obj.someObj,
  (newObj, oldObj) => {
    // 除非 obj.someObj 被整个替换: obj.someObj = { a: 2 }
    // 否则此处的 newObj 和 oldObj 是同一个对象: obj.someObj.a++
    isEqual.value = newObj === oldObj
  },
  { deep: true }
)
</script>

即时侦听

watch 函数默认在侦听源数据变化时才执行回调函数，可以通过immediate选项来立即执行回调函数。

watch(
  source,
  (newValue, oldValue) => {
    // 立即执行，且当 `source` 改变时再次执行
  },
  { immediate: true }
);

一次性侦听

WARNING

仅支持 Vue 3.4+

watch 函数默认在侦听源数据每次变化时执行回调函数，可以通过once选项来仅执行一次。

watch(
  source,
  (newValue, oldValue) => {
    // 当 `source` 变化时，仅触发一次
  },
  { once: true }
);