Vue3组合式API中Inertia SPA模板Ref二次加载为空问题求助

DevOps 小满

2026-7-16

问题分析

你遇到的核心问题是Laravel Echo的事件监听没有和组件生命周期同步：

首次挂载组件时，onMounted里注册的Echo监听会绑定当前组件的calendar ref；
当切换视图卸载组件时，这个监听并没有被移除，仍然保留在全局的Echo实例中；
再次返回组件时，新的组件实例会创建新的calendar ref，但旧的监听回调还是引用着之前已销毁的ref（值为null），而新的监听又会重复注册。

解决方案

要解决这个问题，必须让Echo的监听和组件生命周期绑定：在组件挂载时注册监听，卸载时移除监听，确保回调始终引用当前组件实例的ref。

修改后的代码示例

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const calendar = ref(null)
let echoSubscription = null // 保存订阅实例，用于卸载时清理

onMounted(() => {
  // 注册Echo监听并保存订阅实例
  echoSubscription = window.Echo.channel('myChannel')
    .listen('PlanningChanges', (e) => {
      console.log(calendar.value) // 现在每次返回组件都会引用当前实例的ref
    })
})

onUnmounted(() => {
  // 组件卸载时移除监听，避免内存泄漏和旧回调引用
  if (echoSubscription) {
    window.Echo.channel('myChannel').stopListening('PlanningChanges', echoSubscription)
    // 或者更通用的方式：echoSubscription.unsubscribe()
  }
})
</script>

<template>
  <Child ref="calendar" />
</template>

关键说明

保存订阅实例：通过echoSubscription变量存储Echo监听的返回值，这样才能在组件卸载时精准移除对应的监听。
卸载时清理：在onUnmounted钩子中调用stopListening或unsubscribe，确保旧的监听回调被销毁，不会再引用已卸载组件的ref。
无需手动设置ref：Vue会自动维护模板ref的关联，问题出在监听的生命周期不同步，而非ref本身的设置逻辑。