vue2中created函数添加事件监听后监听的执行问题?

作者站长头像
站长
· 阅读数 15
  created() {
    var _this = this;
    // if (sessionStorage.getItem("username") === '' || sessionStorage.getItem("username") === null) {
    //   _this.username = "";
    // } else {
    //   _this.username = sessionStorage.getItem("username");
    // }
    window.addEventListener('setItem', () => {
      _this.username = sessionStorage.getItem("username");
      console.log('触发了检测函数')
      // alert(_this.username);
    })
  }

我在A页面中的created中添加了一个监听session改变的函数,当从登录页面B登录后,session对应数据项被更改,并重定向到页面A,此时直接执行了事件监听函数,打印了相关信息;但是我用调试工具查看时username的值却与控制台打印的不一致,并且页面上的v-if标签使用的值是调试工具中显示的。如果把注释取消,即在事件监听器前赋值,则username可以正常赋值。我有两点疑问:重定向到页面后,1.事件监听器如果被触发了,为什么username的值在调试工具中却没有改变 2.如果没有被触发,为什么却在控制台打印了相关信息?

回复
1个回答
avatar
test
2024-07-16

球球了各位老爷们,用一下 eventBus 或者 vuex 吧.....


算了还是回答一下吧,你在 页面Acreated 生命周期里才创建了对 setItem 事件的监听。

  1. 页面A 创建并打开之前,这个监听是不存在的。
  2. 创建监听之后并不会运行 setItem 事件,需要你手动去操作一次 setItem

所以就是你能在控制台看到 log 可能是由于你没有在销毁页面的时候去注销掉这个监听事件,所以导致你的监听一直存在于内存当中。

另外一个就是,你是否在 页面A 中的 data 里面声明了 username,如果没有的话,username 这个变量是不会被 Vue 监听的,即改变了之后并不会触发更新。直到另外一个被Vue监听的属性发生了改变才会在视图及VueDevTools里更新

最后,我的建议是通过 eventBus 来处理这种跨页面的属性,或者使用 Vuex 。并不建议使用 sessionStoragelocalStorage 来实现这个功能。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容