Options API(选项式api)你还在用吗

---

前言

现在组合式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官方文档