JS闭包的应用-保存变量状态-计数器的使用

这里简单使用一个demo计数器，来说明闭包的应用。一个函数，多个变量调用，分别保存各自的状态。

需求：有多个地方需要使用同一个计数器函数。

如上图，有两个计数器，中间是计数，默认为0，右边是+1的按钮。我想分开控制它的，即点击各自的按钮，给各自的数字+1。这很简单，给两个按钮分别绑定两个+1的函数即可。但是这两个需求一摸一样，我能不能只用一个函数来完成呢？

先上代码,使用vue3测试

<script setup>
  import { ref } from "vue";

  const useAddNum = () => {
    const num = ref(0);
    const add = () => {
      num.value++;
    };
    return {
      num,
      add,
    };
  };
  const { num, add } = useAddNum();
</script>

<template>
  <div>计数器1：{{ num }} <button @click="add">+1</button></div>
  <div>计数器2：{{ num }} <button @click="add">+1</button></div>
</template>

哎？为啥我点击第一个+1，两个计数器都变了？这是因为这两个计数器都绑定的同一个函数，那么它们的值也是同步变换的。那我们要怎么样才能解决这个问题呢？这就需要引出闭包了。闭包具体的概念我就不细说了，网上可以查到很多。我只记得一条非常清楚的解释，闭包是为了保存函数的状态。

解决方式

<script setup>
  import { ref } from "vue";

  function AddNum() {
    const num = ref(0);
    function add() {
      num.value++;
    }
    return {
      num,
      add,
    };
  }
  const add1 = AddNum();
  const add2 = AddNum();
</script>

<template>
  <div>计数器1：{{ add1.num }} <button @click="add1.add">+1</button></div>
  <div>计数器2：{{ add2.num }} <button @click="add2.add">+1</button></div>
</template>

看代码，我将AddNum这个方法，赋值给了add1和add2两个变量，这样就将状态分别赋值给了add1和add2，各自保存各自的状态，完成了我们最开始的需求，即同一个函数，保存各自不同的状态。在template中，计数器1的数字通过add1.num的形式访问，+1函数通过add1.add的形式访问，计数器2同理。

效果图：

完结撒花🎉🎉🎉🎉🎉