2020-08-12 2 技术
Vue Composition API 初探

Composition API是vue-next中的逻辑复用解决方案,它是一组基于函数式编程的组合式API。Composition 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相同的问题,就是会带来一定的心智负担,容易滥用导致后期项目过于凌乱,难以维护。