目录
  1. 1. 如何优化在vue组件中使用addEventListener 和 removeEventListener
  2. 2. 去掉在methods里面定义方法
  3. 3. 去掉挂载到当前实例
vue 组件设计 - addEventListener & removeEventListener

如何优化在vue组件中使用addEventListener 和 removeEventListener

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
created () {
document.addEventListener('keydown', this.handleKeydown)
},
destroyed () {
document.removeEventListener('keydown', this.handleKeydown)
},
methods: {
handleKeydown (e) {
console.log(e.key)
}
}
}

去掉在methods里面定义方法

1
2
3
4
5
6
7
8
9
10
11
export default {
created () {
this.handleKeydown = (e) => {
console.log(e.key)
}
document.addEventListener('keydown', this.handleKeydown)
},
destroyed () {
document.removeEventListener('keydown', this.handleKeydown)
}
}

去掉挂载到当前实例

1
2
3
4
5
6
7
8
9
10
11
export default {
created () {
const handle = (e) => {
console.log(e.key)
}
document.addEventListener('keydown', handle)
this.$once('hook:destroyed', () => {
document.removeEventListener('keydown', handle)
})
}
}
文章作者: Joe
文章链接: http://zhuowenzhou.com/2020/01/15/advanced-vue-01/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 前端彼岸

评论