Vue3 created内修改v-show绑定变量未触发视图重渲染如何解决

你遇到的渲染失效本质是事件回调的this指向错误：你在hello.on的回调里用了普通匿名函数，函数内部的this不会指向Vue组件实例，你设置的this.showLogout = true根本没有修改到组件内的响应式变量，自然不会触发视图更新。

有两种常用的修复方式：

方式1：把回调改为箭头函数 #

箭头函数不会创建独立的this上下文，会继承外层created钩子的this（也就是组件实例），可以直接修改响应式变量：

created() {
  hello.on('auth.login', (auth) => {
    this.showLogout = true
  })
}

方式2：提前缓存组件实例指向 #

如果需要保留普通函数写法，可以在回调外先把组件实例存为临时变量：

created() {
  const that = this
  hello.on('auth.login', function(auth) {
    that.showLogout = true
  })
}

• 记得在组件卸载前移除事件监听器，避免内存泄漏：

beforeUnmount() {
  hello.off('auth.login')
}

• 如果修改后还是不生效，可以在回调里打印this.showLogout确认赋值是否成功，同时排查login方法执行后是否正确触发了hello的auth.login事件。

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