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

  • Z时代
  • 2024-02-17
  • 分类：IT

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.如果没有被触发，为什么却在控制台打印了相关信息？

回答：

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

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

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

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

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

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

回答：

你在页面B中修改sessionStorage中的数据时，此时页面A还不存在，所以应该不会触发A中的事件回调，另外window上有名为setItem的事件吗？控制台打印信息也许是你在其他地方有加过log

以上是 vue2中created函数添加事件监听后监听的执行问题？ 的全部内容， 来源链接： utcz.com/p/933153.html

回到顶部