目录销毁window.addEventListener事件监听window.addEventListener监听scroll事件解决办法使用throttle出现的新问题最后代码
销毁window.addEventListener事件监听 今天在做项目的过程中,组件中调用iframe时,由于在组件的created方法中写了监听,用于接收iframe发来的信息,但是在组件销毁的时候并没有去掉监听,导致组件创建几次,监听方法就会执行几次,特此记录

1

2

3

created() {

   window.addEventListener('message', this.receiveMessage, false)

  },

1

2

3

beforeDestroy() { // 在组件生命周期结束的时候销毁。

   window.removeEventListener('message', this.receiveMessage, false)

  },


window.addEventListener监听scroll事件 今天想在vue的项目里面用下拉加载,然后就直接写了:

1

2

3

4

5

6

mounted () {

   window.addEventListener( 'scroll', this.scrollHander)

},

methods: {

   scrollHander () { ?}

}

但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁。

解决办法 我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了。

1

2

3

4

5

6

mounted () {

   window.addEventListener('scroll', this.scrollHander)

},

destroyed () {

   window.removeEventListener('scroll', this.scrollHander)

}


使用throttle出现的新问题 下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发,所以优化代码成这样:

1

2

3

4

5

6

mounted () {

   let ?_this = this

   window.addEventListener('scroll', throttle(() => {

   ?  _this.scrollHander()

   },200 ))

},

然后发现没法用removeEventListener了,因为这个函数第二个参数不接受匿名函数。

最后代码 用一个变量中转下

1

2

3

4

5

6

7

8

9

10

11

12

13

mounted () {

   let ?_this = this

   this.throttleLoad = throttle(() =>{

   ?  _this.scrollHander()

   },200)

   window.addEventListener('scroll', this.throttleLoad)

},

destroyed () {

   window.removeEventListener('scroll',this.throttleLoad)?

},

methods: {?

   scrollHander () { }

}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

GitHub 加速计划 / vu / vue
109
19
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐