什么是 Composition API ？_Vue3 从入门到实战

它是一套能够灵活组合组件逻辑，且基于函数式的和渐进式的 APIs。

通俗点来说就是 Vue3 提供了一种新的方式(组合函数式)来组织和编写组件的逻辑代码。

Composition API 将会替代 Vue2 的 Options API

我认为 Composition API 将来会慢慢替代 Vue2 的 Options API，虽然 Vue3 仍然兼容 Vue2 的 Options API，但站在代码的可读性、维护性和一致性的角度来看，你最好不要两者都在同一个组件中使用。
Vue2 中的 Options API 能做的事，Composition API 都能做，反之则不行。在 Options API 里面无法直接复用组件的逻辑，只能通过 Mixin(混入)，但它不是很好的选择，随着组件的复杂度增长，它无法清晰的展示数据状态来源，稍不注意还会造成命名冲突等问题，会给项目带来副作用。
Composition API 更面向未来。

下面通过相同功能的实例来展示两者代码之间的不同

Composition API

<template>
  <div>
    <button @click="increment">Button tapped {{state.times}} times</button>
  </div>
</template>
<script>
  import { createComponent, reactive } from '@vue/composition-api'
  export default createComponent({
    setup() {
      let state = reactive({
        times: 0
      })
      const increment = () => {
        state.times++
      }
      return {
        state,
        increment
      }
    }
  })
</script>

Options API

<template>
  <div>
    <button @click="increment">Button tapped {{times}} times</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        times: 0
      }
    },
    methods: {
      increment() {
        this.times++
      }
    }
  }
</script>

可以看到它们之间区别挺大的，但不用担心，下面会对这个新事物的使用进行详细讲解。

下一节：在 Vue2 中，需要在项目中进行安装 Composition API 才能使用这项新特性。