Vue JS Vuetify Snackbar视图返回后方法触发失效问题

核心问题是消息订阅未随组件销毁解绑，回调指向了已卸载的旧组件实例：

• 路由跳转离开当前页时，组件实例会被Vue销毁，但通过$pnGetMessage注册的showUserMessage回调没有被注销，一直持有旧实例的引用
• 路由返回重新进入页面时，Vue会生成全新的组件实例，再次执行$pnGetMessage绑定新实例的回调，此时ch1频道上会堆积多个历史绑定的回调
• 消息推送过来时，旧实例上的回调会先触发，修改的是已经不在渲染树上的旧实例的showNotification值，控制台看到的日志就是这个已销毁实例打印的，当前页面挂载的新实例的响应式变量根本没被改动，Snackbar自然不会显示
• 手动点击调试按钮时，点击事件直接绑定在当前存活的新实例上，修改的是当前实例的响应式变量，所以能正常弹出。

1. 补全订阅解绑逻辑，避免旧实例引用残留 #

绑定订阅时保存回调引用，在组件销毁钩子中解绑对应频道的回调，同时优化状态更新逻辑，规避v-model时序问题：

export default {
  data() {
    return {
      showNotification: false,
      notificationMessage: '',
      // 存储订阅回调实例，用于后续解绑
      _channelHandler: null
    }
  },
  created() {
    // 绑定当前实例上下文后存储引用
    this._channelHandler = this.showUserMessage.bind(this)
    this.$pnGetMessage('ch1', this._channelHandler)
  },
  beforeDestroy() {
    // 组件销毁前解绑订阅，清除旧实例引用
    if (typeof this.$pnUnGetMessage === 'function') {
      this.$pnUnGetMessage('ch1', this._channelHandler)
    }
  },
  methods: {
    showUserMessage(msg) {
      this.notificationMessage = msg.message.text
      // 先重置状态，避免重复赋值true不触发响应式更新
      this.showNotification = false
      // 等DOM更新周期完成后再赋值，兼容Snackbar内部渲染时序
      this.$nextTick(() => {
        this.showNotification = true
      })
    },
    GoToSession() {
      this.showNotification = false
      this.$router.push({ path: '/' })
    }
  }
}

2. 模板属性修正与兼容处理 #

原模板中timeout、min-width属性未使用绑定写法，传入的是字符串而非数字，部分Vuetify版本会出现超时逻辑异常；同时给Snackbar绑定路由相关key，避免路由切换时组件内部状态残留：

<div class="text-center">
  <v-btn
    dark
    @click="showNotification = true"
  >
    Open Snackbar
  </v-btn>
  <v-snackbar
    :key="'snackbar-' + $route.path"
    v-model="showNotification"
    :timeout="0"
    :min-width="480"
    absolute
    top
    class="white--text"
    color="purple darken-2"
    text
  >
    {{ notificationMessage }}
    <template v-slot:action="{ attrs }">
      <v-btn
        dark
        color="pink darken-2"
        v-bind="attrs"
        @click="GoToSession()"
      >
        Start session
      </v-btn>
    </template>
  </v-snackbar>
</div>

验证要点：修复后多次路由切换再触发消息，控制台只会输出1条showNotification相关日志，不会出现重复打印的情况，Snackbar可正常弹出，无需手动刷新页面。

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