vue 使用防抖函数，绑定事件如何优雅卸载？

Question

如下 throttle 是一个高阶函数，返回加了防抖功能的原函数

但是这个卸载的话 throttle() 返回的新函数是否要保存个变量呢？
因为卸载的时候要用到

请问怎么写更合适呢？

mounted() {
    this.$refs['xxx'].addEventListener("scroll", throttle(this.onScroll, 500));
},
destroyed() {
   // 卸载事件
}

Answer 1

为什么不直接让onScroll是throttle的结果呢

methods: {
  onScroll: _throttle(xxx)
}

当然你现在的写法不想挂一个属性在this上，也可以直接这样写：

mounted() {
    const func = throttle(this.onScroll, 500)
    this.$refs['xxx'].addEventListener("scroll", func)
    this.$on('hook:beforeDestroy', () => {
        this.$refs['xxx'].removeEventListener("scroll", func)
    })
},

Answer 2

created() {
    this.throttleScroll = throttle(this.onScroll, 500)
},
mounted() {
    this.$refs['xxx'].addEventListener("scroll", this.throttleScroll)
},
destroyed() {
   // 卸载事件
   this.$refs['xxx'].removeEventlistener("scroll", this.throttleScroll)
}