Vue3中watch监听布尔值prop未触发问题排查与解决

你遇到的问题是Vue的批量更新机制导致的：在getAppointments函数里，你先把showtable.value设为false，紧接着又设为true——这两个操作在同一个事件循环里，Vue会把它们合并成一次更新，最终showtable的实际值没有发生变化（还是true），所以子组件的watch监听不到变化。

方法1：用nextTick拆分变更到不同事件循环 #

把设置showtable.value = true的操作放到nextTick里，让Vue先处理false的变更，再在下一个事件循环处理true的变更，这样两次值变化都会被监听到：

import { nextTick } from 'vue'

const getAppointments = () => {
    showtable.value = false
    const dates = toRaw(dateRange.value)
    const locs = toRaw(selectedLocations.value)
    if (dates?.length && locs?.length) {
      // 放到nextTick里，确保false的变更先完成
      nextTick(() => {
        showtable.value = true
      })
    }
}

方法2：直接监听核心依赖（推荐） #

既然showtable的切换本质是依赖location_id和daterange的有效性，子组件可以直接监听这两个prop的变化，不需要依赖showtable的布尔切换，这样逻辑更直接，也避免了批量更新的问题：

const props = defineProps({
    location_id: Array,
    daterange: Array,
    showtable: Boolean
})

// 监听位置和日期的变化，满足条件就执行逻辑
watch(
  [() => props.location_id, () => props.daterange],
  ([newLocs, newDates]) => {
    // 可以结合showtable的状态一起判断
    if (props.showtable && newDates?.length && newLocs?.length) {
      alert('do some work')
    }
  },
  { deep: true } // 数组是引用类型，需要开启深度监听内部元素变化
)

方法3：修改watch的刷新时机（不推荐） #

可以给子组件的watch添加flush: 'sync'配置，让Vue同步执行watch回调，但这种方法可能会导致不必要的性能开销，只适合简单场景：

watch(showtable, () => {
    alert('showtable value is:'+showtable.value)
    if (showtable.value) {
       alert('do some work')
     }
}, { flush: 'sync' }) // 同步刷新watch回调

内容的提问来源于stack exchange，提问作者BoundForGlory