vue3 选项式 API 和组合式 API 区别

Vue 3 引入了组合式 API（Composition API），它允许开发者通过逻辑复用和更简洁的代码来创建组件。与此同时，Vue 3 保留了旧的选项式 API（Options API），这是最初的 API 风格，允许开发者使用 data、methods、computed 和 watch 等选项。

主要区别如下：

1. 复用代码： 选项式 API 中，组件内的逻辑通常通过 mixins 或者高阶组件来复用，而组合式 API 可以通过 setup 函数内的 ref、reactive、computed 和 watch 等函数来实现更为简洁的代码复用。
2. 类型支持： 组合式 API 提供了更好的 TypeScript 支持，可以更直观地定义响应式数据和函数。
3. 响应式原理： 选项式 API 依赖于 Vue 实例，而组合式 API 可以更直观地控制响应式系统的原理（使用 ref 和 reactive API）。
4. 生命周期钩子： 选项式 API 中生命周期钩子（如 created、mounted 等）与组合式 API 的 onMounted、onUnmounted 等钩子不同，但组合式 API 也可以通过 setup 来使用。
5. 更好的 IDE 支持： 对于使用 Vue 3 的开发者来说，组合式 API 可以提供更好的 IDE 支持，因为它更接近 JavaScript 的写法。

例子代码对比：

选项式 API:

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

组合式 API:

import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    
    function increment() {
      count.value++;
    }
 
    return {
      count,
      increment
    };
  }
};

在组合式 API 中，ref 是一个响应式引用，它包含一个 .value 属性用于访问或修改值。setup 函数是一个组件的入口点，它返回的对象属性可以在模板中直接使用。