一分钟了解组合式api 和选项式api

Vue3提供两种组织代码逻辑的写法：

通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法

vue2配置项是选项式api，不可以重复定义data，methods等配置选项。

所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法

vue3使用ref，computed等可以重复定义，通过vue提供的函数组织代码实现功能，就是组合式api的写法

组合式的好处有：可复用，可维护

组合式api更加有利于： 逻辑复用， v2中使用mixins来做 , 但是mixins会产生命名冲突和数据来源不明确等问题

实际开发中:  在项目开发中，有两个功能特别类似，如果单独实现，会有很多重复的代码

在v3中，我们利用组合式api的特点，他们抽象出来，进行封装，把得到函数写在一个单独的模块中，导出，以供复用

例如：在做极速约拍项目，有一个“关注”功能，在多个地方都会使用到, 他们调用的api接口是同一个，就是一个参数不同，但是我们有额外的loading功能也集成在里面 针对这种情况，我封装了一个自定义的 hook函数，在函数的内部封装请求和loading值的

封装的代码如下 :

import { showToast } from 'vant'
import { ref } from 'vue'
import type { FollowType } from '../types/consult'
import { followDoc } from '../services/consult'

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 type { Knowledge } from '../../../types/consult'
const { follow, loading } = useFollow('knowledge')