js：vue中使用封装的防抖函数，引发的闭包相关问题的思考

防抖函数的封装请看前端面试题（js）：手写防抖节流？

在一个防抖操作中，内部timer变量需要被一直保存 -> 封装防抖函数时使用闭包 -> 使用防抖函数时，用一个变量引用包含闭包的函数

1.防抖函数的核心：

声明的timer变量，且在一个防抖操作中，timer需要一直保存，不被销毁。

一般函数执行完，函数内部变量自动回收，如何做到timer不被销毁？

2.利用闭包，保存timer。

闭包的前提：函数嵌套，且内层函数对外层函数的变量有引用。

闭包的生命周期：

1.产生：内部函数定义时产生，即外部函数被调用。

2.死亡：包含闭包的函数对象成为垃圾对象。

3.在vue中，如何使用一个变量，保存对包含闭包的函数的引用？

使用场景一：直接声明变量，引用防抖函数（包含闭包的函数）

使用场景二：在钩子函数中声明变量引用防抖函数（包含闭包的函数），这个目前还没搞懂。

以下代码，可以看到mounted内部又产生一个闭包，保存了refresh,refresh引用了防抖函数（包含闭包的函数）。盲猜vue实例引用了这个包含闭包（refresh）的函数对象，后续再做补充。

4.当前vue实例销毁时，清除对包含闭包的函数的引用，即清除闭包

当前vue实例销毁时，清除闭包。最初我是这样做的：

    onUnload() {    // beforeDestroy
      this.inputDebounce = null
    },

即手动清对包含闭包的函数的引用。后来我想了下，当vue实例销毁时，当前vue实例内部的变量被销毁了吗，那我还需要手动清除吗？

查了下官方文档，vue实例执行$destroy后，也就是destroyed之后，会移除watchers，childcomponents 和 event listeners（自定义事件监听），并不是“回收”data等数据。所以依然需要在beforeDestroy钩子中清除对包含闭包的函数的引用。事实上在beforeDestroy这个钩子中，一般进行清除定时器、解绑事件总线事件、取消消息订阅等操作。

5.实际使用

防抖函数已在utils文件夹下封装好，于是我在uni-app项目中用了下，

第一种：直接声明变量，引用防抖函数（包含闭包的函数）：

（vue同理）

法一：在methods里声明变量引用。

法二：在data里声明变量引用。

如有错误，欢迎指正