Vue这有状态方法怎么理解啊？

Question

每个组件都自己实例化之后，为什么还会互相影响？求大神解答

Answer 1

因为图1的写法只会在模块加载时执行一次,它等同于

const click = debounce(function () {
    // 点击响应
}, 500)
export default {
    methods: {
        click,
    }
}

所以如果页面上有同时存在两个该组件，那么这两个组件的click是共享debounce内部的状态的.

function debounce(fn,delay=300) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => fn.apply(this, args), delay);
    }
  }

由于timer是共享的，就会导致——当其中一个组件点击时，debounce包裹的回调会延迟执行，当在这期间你点击了另一个组件，那么就会清除前一个组件启动的timer,导致前一个点击回调失效，不过如果你的delay足够短，一般也是很难出现这种情况

Answer 2

因为防抖的原理就是通过 debounce(fn, duration)把函数fn囚禁起来，由定时器和内部的状态来决定何时执行 fn。
定时器和内部的状态是保存在一个封闭的作用域里的，debounce每执行一次就会生成一个这样的作用域，如果整个应用里只执行过一次，而且在不同的组件里被使用，就可能导致匪夷所思的 Bug 。
debounce 函数是在模块加载的时候执行的，只会执行一次，各处的引用都是指向同一组状态。

Answer 3

因为在复用组件的时候，会使用同一个闭包，所以会有问题，会出现问题的场景可以看我这篇笔记聊一个复用组件中使用debounce时遇到的问题。

Answer 4

不是写了吗 维护着一个内部状态