Vue 3 中的 Options API 与 Composition API

在 Vue 3 中，引入了一种新的 API 形式——Composition API，它与 Vue 2 中的 Options API 有所不同。接下来，我们将详细对比这两种 API 的特点和使用方法。

一、Options API选项式API

（一）特点

Options API 是 Vue 2 中使用的主要 API 形式。它将组件的各个部分（如数据data、方法method、计算属性computed还有监控watch）分散在不同的选项中。这种形式直观易懂，但当组件变得复杂时，会带来一些维护和复用上的问题。

（二）示例

以 Person.vue 组件为例，数据、方法等都分散在不同的选项中：

HTML复制

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
  data() {
    return {
      name: '张三',
      age: 18,
      phone: '13812341234'
    };
  },
  methods: {
    changeName() {
      this.name = '张杠三';
    },
    changeAge() {
      this.age += 1;
    },
    showPhone() {
      alert(this.phone);
    }
  }
};
</script>

在这个例子中，data、methods 等都是组件的选项，它们分散在不同的地方。如果需要修改或新增功能，可能需要在多个地方进行修改，这在组件变得复杂时会变得不便。

二、Composition API组合式API

（一）特点

Composition API 是 Vue 3 中引入的新 API 形式。它允许你将相关的逻辑组合在一起，形成一个更集中、更易于维护和复用的结构。通过使用 setup 函数，你可以将数据、方法、计算属性等集中管理，使得代码更加模块化。

（二）示例

将 Person.vue 组件改写为使用 Composition API 的形式：

HTML复制

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRefs } from 'vue';

export default {
  name: 'Person',
  setup() {
    const state = reactive({
      name: '张三',
      age: 18,
      phone: '13812341234'
    });

    const changeName = () => {
      state.name = '张杠三';
    };

    const changeAge = () => {
      state.age += 1;
    };

    const showPhone = () => {
      alert(state.phone);
    };

    return {
      ...toRefs(state),
      changeName,
      changeAge,
      showPhone
    };
  }
};
</script>

在这个例子中，我们使用 setup 函数来集中管理数据和方法。通过 reactive 创建响应式状态对象 state，并使用 toRefs 将其转换为可以单独响应的属性。这样，所有与 Person 组件相关的逻辑都集中在一个 setup 函数中，便于维护和复用。

三、对比

（一）Options API

• 优点：直观易懂，适合简单的组件。

• 缺点：当组件变得复杂时，数据和方法分散在不同的选项中，不利于维护和复用。

（二）Composition API

• 优点：将相关的逻辑集中管理，便于维护和复用，适合复杂的组件。

• 缺点：学习曲线稍陡，需要理解 setup 函数和响应式系统的使用。

四、总结

通过上述对比，我们可以看到 Options API 和 Composition API 各有优缺点。Options API 适合简单的组件，而 Composition API 适合复杂的组件，能够更好地管理复杂的逻辑。在实际开发中，可以根据组件的复杂度选择合适的 API 形式。我们也不要说Options API的不好，毕竟vue2的哪些日子也过了哈哈。一句话概括来说，Composition API 将方法进行了集中，更加方便修改和维护