vue3 中 使用watch 和 watchEffect 监听 defineProps 的值

1. 使用 watch 监听 defineProps

watch 适用于监听特定的 props，比如监听某个 props 变量的变化。

示例：监听单个 props

<script setup>
import { watch } from 'vue'

const props = defineProps({
  count: Number
})

watch(() => props.count, (newVal, oldVal) => {
  console.log(`count 变化了: ${oldVal} -> ${newVal}`)
})
</script>

监听多个 props

<script setup>
import { watch } from 'vue'

const props = defineProps({
  firstName: String,
  lastName: String
})

watch([() => props.firstName, () => props.lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`firstName: ${oldFirst} -> ${newFirst}`)
  console.log(`lastName: ${oldLast} -> ${newLast}`)
})
</script>

监听整个 props 对象

默认情况下，props 本身是一个不可变对象，如果想监听整个 props 的变化，需要添加 { deep: true, immediate: true }：

<script setup>
import { watch } from 'vue'

const props = defineProps({
  user: Object
})

watch(props, (newProps, oldProps) => {
  console.log('props 变化了:', newProps)
}, { deep: true, immediate: true })
</script>

注意： 不能直接 watch(props, callback)，需要加 { deep: true }，否则不会触发回调。

2. 使用 watchEffect 监听 defineProps

watchEffect 可以 自动收集 依赖，适合监听多个 props，不需要手动指定。

示例：自动监听 props.count

<script setup>
import { watchEffect } from 'vue'

const props = defineProps({
  count: Number
})

watchEffect(() => {
  console.log(`count 变化了: ${props.count}`)
})
</script>

适用场景：

• 适合监听多个 props，不需要手动指定
• 立即执行一次（不像 watch 需要等变化才触发）

3. watch vs watchEffect 监听 props

选择指南

• 需要对比 新旧值 → watch
• 监听 多个 props 并自动响应 → watchEffect
• 监听 深层嵌套 props → watch + { deep: true }