面试题：Vue 3的Composition API如何提升复杂组件性能

1. 更好的逻辑复用与代码组织，间接提升性能

在Vue 2的Options API中，逻辑复用通过mixins实现，但mixins存在命名冲突、数据来源不清晰等问题。Vue 3的Composition API使用setup函数和reactive、computed等函数，使得逻辑复用更灵活，代码更清晰，间接提升性能。

示例：

<!-- Vue 2 Options API -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<!-- Vue 3 Composition API -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

在Vue 3的示例中，count和increment逻辑紧密关联，易于维护和复用，随着组件逻辑复杂度增加，这种优势更明显，避免了Options API中可能因逻辑分散导致的性能损耗。

2. 精准的响应式依赖追踪

Vue 3的Composition API使用Proxy实现响应式系统，相较于Vue 2基于Object.defineProperty，能更精准地追踪依赖。

示例：

<template>
  <div>
    <p>{{ fullName }}</p>
    <input v-model="firstName" />
    <input v-model="lastName" />
  </div>
</template>

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

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value;
});
</script>

在上述Vue 3示例中，当firstName或lastName变化时，fullName的计算函数会精准地重新计算，Vue 3能精确知道哪些响应式数据变化触发了计算，而Vue 2可能存在依赖追踪不够精准的情况，导致不必要的重新渲染。

3. 更好的Tree - shaking支持

Vue 3的Composition API写法更利于Tree - shaking。Tree - shaking能去除未使用的代码，减小打包体积，从而提升性能。

例如，在引入Vue 3的功能时：

// Vue 3 Composition API
import { ref } from 'vue';

const count = ref(0);

打包工具可以轻松识别出只引入了ref，而未使用的其他功能不会被打包进去。而在Vue 2 Options API中，通常是整体引入Vue对象，难以做到如此精准的代码剔除。

面试题：Vue 3的Composition API如何提升复杂组件性能

知识考点

面试题答案

1. 更好的逻辑复用与代码组织，间接提升性能

2. 精准的响应式依赖追踪

3. 更好的Tree - shaking支持