防止vuejs中的处理程序重叠

<template>
  <div>
    <h1 v-once>{{ title }}</h1>
    <button v-once @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue.js'
    };
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

<template>
  <div>
    <h1 v-if="showTitle">{{ title }}</h1>
    <button v-if="showButton" @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue.js',
      showTitle: true,
      showButton: true
    };
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

<template>
  <div>
    <h1>{{ computedTitle }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue.js'
    };
  },
  computed: {
    computedTitle() {
      return this.title.toUpperCase();
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>