导致无限循环的Vue.js计数器变量

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 错误的计算属性，因为它依赖于自身
    const increment = computed(() => {
      count.value++;
      return count.value;
    });

    return {
      count,
      increment
    };
  }
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 使用methods来处理副作用
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>