为什么不会触发道具的 Vue3 观察者？ （作文API）

Question

我正在拼命地尝试 watch 一个 prop in Vue3 (3.2.31, Composition API):

<script lang="ts" setup>
import { toRef, watch } from 'vue'

const props = defineProps({
  'trigger-refresh': {
    type: String
  }
})
const triggerRefresh = toRef(props, 'trigger-refresh')
watch(triggerRefresh, (a, b) => console.log('props triggered refresh'))
</script>

我触发了 trigger-refresh 的发射，它通过上面的代码传递给组件并且 我看到 triggerRefresh 在 DevTools→Vue 中发生变化。

所以除了 watch 没有触发 （即控制台上没有消息）之外，组件内部的一切都很好。

我阅读了 documentation for Watchers and responses to a （其中一个回复与我所做的几乎相同）但我只是不明白为什么这对我的情况不起作用。

Answer 1

道具名称已标准化为驼峰式大小写。正如问题中所述，看到更新的是 triggerRefresh 而不是 trigger-refresh 。所以应该是：

const triggerRefresh = toRef(props, 'triggerRefresh')

watch(triggerRefresh, ...)

或者只是：

watch(() => props.triggerRefresh, ...)

Answer 2

尝试添加 immediate 选项，以便在第一次道具更改时触发手表：

watch(triggerRefresh, (a, b) => console.log('props triggered refresh'), {
  immediate: true
})