分析Vue框架中闭包的用途和应用

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemList" :key="index">
        <button @click="handleClick(index)">{{ item }}</button>
      </li>
    </ul>
    <p>当前点击按钮的索引：{{ currentIndex }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [1, 2, 3, 4, 5],
      currentIndex: -1
    };
  },
  methods: {
    handleClick(index) {
      // 使用闭包，保存当前的索引值
      this.currentIndex = index;
    }
  }
};
</script>

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleClick() {
      let self = this;
      // 使用闭包，保护count变量
      (function() {
        self.count++;
      })();
    }
  }
};
</script>