Vue 3.0 Composition API 与 Vue 2.x Options API 的差异对比

Vue 3.0 引入了 Composition API，这是对 Vue 2.x 中 Options API 的一种补充和增强。两者在代码组织和逻辑复用上有显著的不同，主要体现在以下几个方面：

1. 代码组织方式

• Options API：在 Options API 中，代码是按照选项（如 data、methods、computed、watch 等）来组织的。这种方式在小型组件中非常直观，但随着组件逻辑的复杂化，相关的代码可能会分散在不同的选项中，导致代码难以维护和理解。

  export default {
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
      }
    },
    computed: {
      doubleCount() {
        return this.count * 2;
      }
    }
  };
  

• Composition API：Composition API 允许开发者将相关的逻辑组织在一起，而不是分散在不同的选项中。通过 setup 函数，开发者可以将状态、计算属性、方法等逻辑集中在一个地方，使得代码更加模块化和可维护。

  import { ref, computed } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
  
      const increment = () => {
        count.value++;
      };
  
      const doubleCount = computed(() => count.value * 2);
  
      return {
        count,
        increment,
        doubleCount
      };
    }
  };
  

2. 逻辑复用

• Options API：在 Options API 中，逻辑复用通常通过 mixins 或高阶组件来实现。这种方式虽然可行，但容易导致命名冲突、来源不清晰等问题，尤其是在大型项目中。

• Composition API：Composition API 通过自定义的 composition 函数来实现逻辑复用。这些函数可以像普通的 JavaScript 函数一样被导入和使用，避免了 mixins 的缺点，并且使得逻辑复用更加灵活和清晰。

  // useCounter.js
  import { ref, computed } from 'vue';
  
  export function useCounter() {
    const count = ref(0);
  
    const increment = () => {
      count.value++;
    };
  
    const doubleCount = computed(() => count.value * 2);
  
    return {
      count,
      increment,
      doubleCount
    };
  }
  
  // MyComponent.vue
  import { useCounter } from './useCounter';
  
  export default {
    setup() {
      const { count, increment, doubleCount } = useCounter();
  
      return {
        count,
        increment,
        doubleCount
      };
    }
  };
  

3. TypeScript 支持

• Options API：Options API 对 TypeScript 的支持相对较弱，尤其是在类型推断和类型安全方面。由于选项的分散性，TypeScript 难以推断出完整的组件类型。

• Composition API：Composition API 天然支持 TypeScript，类型推断更加准确和直观。通过 ref、computed 等函数，TypeScript 可以更好地推断出变量的类型，从而提供更好的开发体验。

  import { ref, computed } from 'vue';
  
  export default {
    setup() {
      const count = ref(0); // TypeScript 推断 count 为 Ref<number>
  
      const increment = () => {
        count.value++;
      };
  
      const doubleCount = computed(() => count.value * 2); // TypeScript 推断 doubleCount 为 ComputedRef<number>
  
      return {
        count,
        increment,
        doubleCount
      };
    }
  };
  

4. 响应式系统

• Options API：在 Options API 中，响应式数据是通过 data 选项来定义的，Vue 会自动将其转换为响应式对象。

• Composition API：Composition API 提供了更底层的响应式 API，如 ref 和 reactive，开发者可以更灵活地控制响应式数据的创建和管理。

  import { reactive } from 'vue';
  
  export default {
    setup() {
      const state = reactive({
        count: 0
      });
  
      const increment = () => {
        state.count++;
      };
  
      return {
        state,
        increment
      };
    }
  };
  

5. 生命周期钩子

• Options API：生命周期钩子是通过选项（如 created、mounted 等）来定义的。

• Composition API：Composition API 提供了对应的生命周期钩子函数（如 onMounted、onUpdated 等），这些函数可以在 setup 函数中使用。

  import { onMounted } from 'vue';
  
  export default {
    setup() {
      onMounted(() => {
        console.log('Component is mounted!');
      });
    }
  };
  

总结

• Options API 更适合小型项目或简单组件，代码组织直观，但逻辑复杂时难以维护。
• Composition API 更适合大型项目或复杂组件，提供了更好的代码组织、逻辑复用和 TypeScript 支持，同时提供了更灵活的响应式系统。

在实际开发中，可以根据项目的复杂度和团队的技术栈选择合适的 API，甚至可以在同一个项目中混合使用两者。