在Vue中进行性能优化的几种常用方法

<template>
  <div>
    <h1 v-once>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, Vue!',
      description: 'This is a simple Vue.js application.'
    };
  }
};
</script>

<template>
  <div>
    <p>输入: <input v-model="inputText"></p>
    <p>字符数: {{ characterCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  computed: {
    characterCount() {
      return this.inputText.length;
    }
  }
};
</script>

const AsyncComponent = () => import('./components/YourComponent.vue');

export default {
  components: {
    AsyncComponent
  }
};

watch: {
  someData: {
    handler(newValue) {
      // 处理逻辑
    },
    deep: true // 避免这种用法
  }
}

<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'MyComponent'
    };
  }
}
</script>

<template>
  <virtual-scroller :items="items">
    <template v-slot="{ item }">
      <div class="item">{{ item.text }}</div>
    </template>
  </virtual-scroller>
</template>

<script>
import { VirtualScroller } from 'vue-virtual-scroller';

export default {
  components: { VirtualScroller },
  data() {
    return {
      items: Array.from({ length: 10000 }, (_, index) => ({ text: `Item ${index + 1}` }))
    };
  }
}
</script>