InertiaJS搭配Vue时computed属性为何必须搭配空watch才生效

问题根源 #

Vue 的 computed 属性为懒求值设计，仅当该属性被模板、其他计算属性、watch 等响应式逻辑依赖时，才会执行内部的计算逻辑。你保留空 watch 时相当于标记了 flash 这个 computed 属性被依赖，因此内部的 toast 逻辑会被触发；移除 watch 后该 computed 无任何依赖，自然不会执行。

同时你在 computed 中编写触发 toast 这类副作用逻辑本身不符合 Vue 的设计规范，computed 应当是无副作用的纯函数，仅用于返回派生数据，不建议在此处编写修改状态、触发弹窗类逻辑。

你把 toast 移到 watch 中不生效的原因 #

大概率是监听路径错误、未开启深层监听导致的：Inertia 的 $page.props 是嵌套响应式对象，直接监听浅层属性无法捕获内层 flash 的变化。

正确实现方案 #

不需要额外声明 computed，直接监听 Inertia 的 flash 属性即可：

watch: {
  '$page.props.flash': {
    handler(newFlash) {
      if (newFlash.message) {
        this.$toast.open({
          type: newFlash.type,
          message: newFlash.message.message
        })
      }
    },
    deep: true,
    immediate: true // 页面首次加载时如果存在 flash 消息也能正常触发
  }
}

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