Vue3 watch 侦听 props 的变化

watch 有两种写法

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

如果我们想侦听 props 上的属性变化，需要采用第一种写法

// 假设 props 上有个 name 属性
// 下面的写法会生效
watch(
  () => props.name,
  (count, prevCount) => {
    /* ... */
  }
)

// 下面的写法不会被触发
watch(props.name, (count, prevCount) => {
  /* ... */
})