详解vue中的Options API和Composition API

前言

在vue中两种主要的 API 设计风格，分别是 Options API 和 Composition API。它们分别用于组织和管理组件的逻辑. 下面我来分别介绍一下这两种API的使用及区别

Options API

首先Options API是vue2中主要使用的API设计方式。它基于选项对象，将组件的配置分解为一系列的选项。每个选项对应于组件的不同功能，例如数据 (data)、生命周期钩子 (created、mounted 等)、方法 (methods) 等。但是这种开发方式在面对复杂组件时可能导致选项过多，难以维护。

示例

<template>
  <div>
    <p>{{ message }}</p>
     <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

在上面这个示例中，在template部分，我们进行了数据绑定的操作，分别显示组件中的 message 和 count 数据。并通过@click="increment" 监听按钮的点击事件，当按钮被点击时触发 increment 方法。

在 Options API 中，使用 data 选项来定义组件的数据，使用 methods 选项来定义组件的方法。在这个示例中，我们通过设计message 和 count 的数据属性，通过 data 方法返回初始化的值；并通过increment 的方法，在按钮点击时将 count 的值加一。总的来说，在这个示例中，通过 data 选项定义数据，通过 methods 选项定义方法，然后在模板中进行数据绑定和事件绑定，构建了一个简单的计数器组件。

Composition API

Composition API是vue3中设计api的设计方法。他的目的是解决 Options API 的一些缺点，提供更灵活、可组合的组件逻辑复用。它基于函数，将组件逻辑划分为一组功能相关的函数，这些函数可以在组件中被自由组合和复用。Composition API 使用 setup 函数来组织组件逻辑。

示例

<template>
  <div>
    <p>{{ message }}</p>
    <p>Count:{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { message, count, increment };
  }
}
</script>

上面的示例中，在template部分，我们进行了与Option API一样的操作，都进行了数据绑定和事件绑定。不同的是，在script中，Composition API 中引入了 setup 函数，用于设置组件的配置。在 setup 函数内部，可以使用 Composition API 提供的函数，并提供了 ref 函数，用于创建响应式对象。

总的来说，这个示例展示了 vue3中 Composition API 的用法，通过 setup 函数和响应式函数（ref）来组织组件逻辑。这种方式相对于 vue2 Options API 更加灵活，特别适用于大型组件和逻辑的复用。

结语

两者的优劣比较：

在逻辑组织和逻辑复用方面，Composition API是优于Options API，因为Composition API几乎是函 数，会有更好的类型推断。 Composition API对 tree-shaking 友好，代码也更容易压缩。 Composition API中见不到this的使用，减少了this指向不明的情况。 如果是小型组件，可以继续使用Options API，也是十分友好的。