前言

现在组合式api的出现，直接解决了Options Api（选项式）存在问题，和痛点

一、Options API（选项式）

以下代码的写法相信你也不会陌生
主要功能是用elementui搭建了一个todoList 非常简陋，如果后续扩展改变状态功能，添加弹窗校验，添加数据输入校验，添加提交成功提示等等功能。代码会越来越长。很难后期维护。

<template>
  <div style="width: 800px">
    <el-row>
      <el-col :span="19">
        <el-input v-model="input" placeholder="Please input" />
      </el-col>
      <el-col :span="4">
        <el-button @click="addItem" type="primary">Add</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="date" label="Date" />
      <el-table-column prop="name" label="Item" />
      <el-table-column prop="state" label="State" />
      <el-table-column fixed="right" label="Operations">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="remove(scope.$index)"
          >
            delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
type tableDataType = {
  id: number;
  date: string;
  name: string;
  state: string;
};
export default defineComponent({
  setup() {
    const input = ref("");
    const tableData = reactive<tableDataType[]>([]);
    return {
      input,
      tableData,
    };
  },
  methods: {
    remove(index: number) {
      this.tableData.splice(index, 1);
    },
    addItem() {
      console.log(this.tableData);
      this.tableData.push({
        id: Math.random(),
        date: new Date().toLocaleString(),
        name: this.input,
        state: "Y",
      });
      this.input = "";
    },
  },
});
</script>

二、Composition API（组合式）

改用组合式写法，如果后续扩展输入框功能，就可以把所有输入框相关的改动都放到一个内容块内，例如下面，在输入框上扩展了校验功能。之后再添加其他和输入框相关的方法，可以继续写在一起

<script lang="ts" setup>
import { reactive, ref } from "vue";
type tableDataType = {
  id: number;
  date: string;
  name: string;
  state: string;
};

const input = ref("");
const inputFn = (value: string) => {
  switch (value) {
    case "1":
      window.alert("Already exists");
      break;
    case "2":
      window.alert("error");
      break;
    default:
      break;
  }
};

const tableData = reactive<tableDataType[]>([]);
const remove = (index: number) => {
  tableData.splice(index, 1);
};
const addItem = () => {
  console.log(tableData);
  tableData.push({
    id: Math.random(),
    date: new Date().toLocaleString(),
    name: input.value,
    state: "Y",
  });
  input.value = "";
};
</script>

三、优点

1、非常直观的像上面的例子，可以更好的后期维护和扩展。代码更易读。
2、组合式 API 解决了 mixins 的所有缺陷

不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，还得找半天。

命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。

隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

3、更小的生产包体积​

搭配<script setup>使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。这是由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。不像选项式 API
需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问 <script setup>中定义的变量，无需从实例中代理。这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

4、更好的类型推导

组合式 API 主要利用基本的变量和函数，它们本身就是类型友好的。用组合式 API重写的代码可以享受到完整的类型推导，不需要书写太多类型标注。

四、缺点

1. 学习成本较高：相比于Vue2中的选项式API，组合式API需要学习一些新的api还需要自己去组织代码整体结构，不像Vue2中，帮助你规划代码模块。但我觉得这也不算缺点

2. 需要手动管理响应式：组合式API中需要手动管理响应式，需要使用ref和reactive等API来创建响应式数据。

总结

1、在逻辑组织和逻辑复用方面，Composition API是优于Options API。
2、Composition API会有更好的类型推断。
3、Composition API 对 tree-shaking 友好，代码也更容易压缩。
4、Composition API中没有this，减少了this指向不明的情况。
5、如果是小型组件，当然可以继续使用Options API。
6、并且官方也不会废弃Options API。

参考文献：Vue官方文档