今天遇到这样的场景，发现在触发复用的自定义组件中添加了防抖功能，发现只执行了一次，而且它不是每个组件内部的函数都按预期执行一次。一开始以为是没有同步赋值的缘故。检查没有问题后，我将注意力转移到去抖动上。去掉防抖后问题解决，但是防抖无法去掉。于是查了下相关issue，发现是因为多个组件实例共享同一个预置防抖功能，彼此并不独立。一直直接按照Vue文档中的说明写，再加上请求接口会是这样：importdebouncefrom"lodash.debounce";import{remoteSearchAPI}from'xxxx';exportdefault{//。..方法：{remoteMethod:debounce(function(value=""){constparams={keywords:value,};this.fetching=true;remoteSearchAPI(params).then((res)=>{//...}).finally(()=>{this.fetching=false;});},350,{maxWait:1000}),},};这对于预去抖动的组件来说是有问题的，因为预稳定函数是有状态的：它在运行时维护内部状态。如果多个组件实例共享相同的预设防抖功能，它们将相互影响。响应基础|Vue.js那么如何解决这个问题呢？Vue的文档中也给出了相应的解决方案。为了保持每个组件实例的防抖功能相互独立，我们可以在创建的生命周期钩子中创建这个预设防抖功能：exportdefault{created(){//每个实例都有自己的预设防抖processingfunctionthis.debouncedClick=_.debounce(this.click,500)},unmounted(){//最好在组件卸载的时候//清除防抖定时器this.debouncedClick.cancel()},methods:{click(){//...responsetoclicks...}}}参考资源vue踩坑——如何正确使用debounce#响应式有状态方法基础|Vue.js文章参加了SegmentFault思维写作挑战赛，欢迎大家一起阅读。
