如何防止Vue组件重复渲染的方法示例

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <input v-model="firstName" placeholder="First Name" />
    <input v-model="lastName" placeholder="Last Name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      // 计算属性只有在 firstName 或 lastName 变化时才重新计算
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

<template>
  <div>
    <h1>当前值: {{ value }}</h1>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  },
  methods: {
    increment() {
      this.value++;
    }
  },
  watch: {
    value(newValue) {
      if (newValue % 5 === 0) {
        // 只在 value 为 5 的倍数时才重渲染
        console.log('Value is a multiple of 5:', newValue);
      }
    }
  }
};
</script>

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <div v-if="isVisible">
      <p>这个组件是动态渲染的！</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

<template>
  <div>
    <button @click="currentView = 'ComponentA'">加载组件 A</button>
    <button @click="currentView = 'ComponentB'">加载组件 B</button>
    <keep-alive>
      <component :is="currentView"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentView: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

<template>
  <div>
    <child-component :data="childData"></child-component>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      childData: { value: 0 }
    };
  },
  methods: {
    updateData() {
      this.childData.value++;
    }
  }
};
</script>