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

Vue 3 选项式 API 和组合式 API 区别

选项式 API (Options API)

选项式 API，可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
优点：
1.上手简单，位置固定
缺点：
一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含很多个方法，往往分不清哪个方法对应着哪个功能，而且当你想要新增一个功能的时候你可能需要在 data，methods，computed，watch中都要写一些东西，但是这个时候每个选项里面的内容很多你需要上下来回的翻滚，特别影响效率。

vue3 如下

<template>
  
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
  name: 'xxx',
  components: {},
  setup() {
    const state = reactive({
      checked: { path: '/', query: { id: 111 } },
    });
    onMounted(async () => {});
    return {
      ...toRefs(state),
    };
  },
});
</script>

组合式 API (Composition API)

组合式 API，可以使用导入的 API 函数来描述组件逻辑，是一系列 API 的集合，可以使用函数的方式书写 Vue 组件。
组合式 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。

在单文件组件中，组合式 API 通常会与< script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，< script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

优点：
Composition API最大的优点通俗的讲就是把跟一个功能相关的东西放在一个地方，它是目前最合理也是最容易维护的，你可以随时将功能的一部分拆分出去。你可以将每一个功能相关所有的东西比如methods，computed都放在如上图的function中，这个function可以独立的存在，可以放在一个TS文件中，也可在npm中单独发布，最终Composition API把他们组合起来

总结：更清晰，更好的逻辑复用，体积更小。

类似react hooks
缺点：
学习成本增加，思维改变

<template>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({
  /** autoplay  */
  xxx: {
    type: [String, Number],
    default: 3000,
  },
});
</script>
<style lang="scss" scoped>
</style>

如果写组件的话建议 组合式 API (Composition API) 假如配合storybook 可以更好的支持以及更清晰！！！。

标签

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