Composition API是 vue-next 中的逻辑复用解决方案，它是一组基于函数式编程的组合式 API。与之前的逻辑复用方案mixin相比，带来了更友好的类型检查，更方便的测试等优点。

Composition API的详细用法和 API 可以参考官方文档，这里我们做一个简单的初步的上手体验。

安装

Composition API被单独抽离为一个库，让我们可以在 vue2.x 中体验该特性。

npm install @vue/composition-api
# or
yarn add @vue/composition-api

在Vue中注册@vue/composition-api

// main.js
import Vue from 'vue'
import CompositionApi from '@vue/composition-api'

Vue.use(CompositionApi)

得益于 vue 的插件机制，通过一行简单的代码，我们就给项目添加了Composition API特性。

开始

Composition API给 vue 组件增加了一个名为setup的生命周期函数，它要早于befororeCreate执行，在 vue-next 中是最早执行的生命周期钩子。

注意: 和befororeCreate一样，setup实例还没创建，因此无法使用this。

<template>
  <!-- 自动展开 -->
  <div>{{message}}<div>
  <!-- 也可以手动取值 -->
  <div>{{message.value}}</div>
</template>
<script>
  import { ref } from '@vue/composition-api'

  export default {
    setup () {
      const message = ref('hello vue')
      return {
        message,
        setMessage: (msg) => initialMessage.value = msg
      }
    }
  }
</script>

ref是一个响应式 API，它返回一个只有 value 的单属性响应对象，在模板中引用ref对象，会自动展开。但是在 javascript 代码中，除了在响应式对象中，都需要手动展开。

import { ref, reactive } from '@vue/composition-api'

export default {
  setup() {
    const message = ref('hello vue')
    const data1 = reactive({
      message, // 自动展开
    })
    const data2 = {
      message: message.value, // 需要手动展开
    }
  },
}

扩展

上面是非常基础的，也是最常用的两个 API。使用组合 API 可以让我们像使用 react hooks 一样的方式去组织/复用逻辑代码。比如我们可以使用组合封装一个useMouseState的函数来监控鼠标位置信息。

import { useMouseState } from 'beautiful-vue-hooks'

export default {
  setup() {
    const { clientX, clientY } = useMouseState()
    return {
      clientX,
      clientY,
    }
  },
}

更多的示例可以参考我开发的一个 hook 集合Beautiful-Vue-Hooks。

小结

Composition API很大程度上借鉴了react hooks，但是两者在用法的功能上还是有一定的差异。对于 vue 来说，组合提供了比mixin更好的逻辑复用方案。同时也能提供更完善的类型检查。

但是同时也存在与 hooks 相同的问题，就是会带来一定的心智负担，容易滥用导致后期项目过于凌乱，难以维护。