能结合代码来说明组合式API比起选项式API的好处？

在vue3中我们采取了组合式api的写法，相较于vue2的选项式api，组合式更加的灵活，将同一个功能的代码集中起来处理，使得代码更加有序，有利于代码的书写和维护以及复用。

在vue2中采用选项式api，将数据和函数集中起来处理，将功能点切割了当逻辑复杂的时候不利于代码阅读。

在项目开发中，有两个功能特别的类似，如果单独实现，会有很多重复的代码，在vue3中，我们利用组合式api的特点，他们抽离出来，进行封装，把得到的函数写在一个单独的模块中，导出，以供复用

在之前做过的项目中，有一个不同页面但是相同的功能，调用的api接口，就是参数不同，你可能会说，为什么不直接调用接口，传不同的参数而已，但是我们有额外的功能在里面，比如消息提示，按钮的loading效果。

针对这种情况我封装一个自定义的 hook 函数，如下

export const useFollow = (type: FollowType) => {
  const loading = ref(false)
  const follow = async (item: { id: string; likeFlag: number }) => {
    loading.value = true
    await followDoc(item.id, type)
    item.likeFlag = item.likeFlag ? 0 : 1
    showToast('操作成功')
    loading.value = false
  }

  return {
    follow,
    loading
  }
}

这样在组件中调用

import { useFollow } from '../../../composable'
const { follow, loading } = useFollow('参数')

也运用到了闭包，

在vue2中，我们可以通过mixins也可以来抽离公共代码，但是组合式api更加有利