前言

在vue2中代码复用一般是mixins混入来实现但使用mixins进行代码复用会有一些问题。vue3虽然对 mixins进行了保留但不再推荐使用。引用vue3官方文档中罗列的mixins存在的问题：

不清晰的数据来源：当使用了多个mixin时，实例上的数据属性来自哪个mixin变得不清晰，这使追溯实现和理解组件行为变得困难。 命名空间冲突：多个来自不同作者的mixin可能会注册相同的属性名，造成命名冲突。 隐式的跨**mixin**交流：多个mixin需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。

所以，vue3官方给出了一个复用代码的解决方案就是使用组合式API。

1. 组合式 API

组合式API (Composition API)是一系列API的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的API：

响应式API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子：例如onMounted()和onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
依赖注入：例如provide()和inject()，使我们可以在使用响应式API时，利用Vue的依赖注入系统。

2. 组合式 API 的作用

这里官方文档列出了几点：更好的逻辑复用、更灵活的代码组织、更好的类型推导、更小的生产包体积。这里已经出现了本文关注的重点即更好的逻辑复用我们来看下官方的说明：

组合式 API最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API中我们主要的逻辑复用机制是mixins，而组合式 API解决了mixins的所有缺陷。

两个结论：

组合式 API解决了mixins的所有缺陷
能够通过组合函数来实现更加简洁高效的逻辑复用

3. 组合式函数

在Vue应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。一般会以use开头进行函数命名，放到composables目录中。组合函数内部可以使用组合式api，一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。当时我看到这里时候其实有个疑问为什么要强调是有状态逻辑的函数（有状态函数是指函数内部有自己的状态更改），这个问题先留着，看完代码示例自会理解。

4. 示例

抽离后台管理列表共用的逻辑，示例只是列表相关逻辑封装，你甚至可以将增删改查的逻辑封装进去。 usePage.js

import { reactive, ref } from 'vue'
// 一个用于重置对象字段为原始值的函数
import { resetObjToPrimitiveType } from '@/utils/tool'

/**
 * @description usePage 接收一个 opts 参数，返回列表所需数据
 * @param {Object} opts.searchForm - 默认查询参数
 * @param {Function} opts.getListApi  - 获取列表数据的接口
 * @param {Function} opts.customQueryParameters  - 自定义查询参数
 * @param {Function} opts.getListFunc  - 执行完 getList 成功后执行的逻辑 有一个opts参数
 * @param {Function} opts.resetFunc  - 执行完 reset 后执行的逻辑
 * @param {Function} opts.sizeChangeFunc  - 执行完 sizeChange 后执行的逻辑
 * @param {Function} opts.currentChangeFunc  - 执行完 currentChange 后执行的逻辑
 */
export function usePage(opts) {
  // searchForm 由外部传入，内部传入导出的数据无法推导类型即无法知道对象里有什么也会失去代码提示
  const {
    searchForm = {},
    getListApi,
    customQueryParameters = () => {},
    getListFunc = (opts) => {},
    resetFunc = () => {},
    sizeChangeFunc = () => {},
    currentChangeFunc = () => {}
  } = opts
  
  const page = reactive({
    pageSize: 10,
    pageNo: 1,
    total: 0
  })
  const tableData = ref([])

  function reset() {
    Object.assign(searchForm, resetObjToPrimitiveType(searchForm))
    resetFunc()
    handleCurrentChange(1)
  }
  
  function getList() {
    const opts = {
      ...page,
      ...searchForm,
      ...customQueryParameters()
    }

    getListApi(opts).then((res) => {
      if (res.code === 0) {
        tableData.value = res.data?.rows || []
        page.total = res.data?.total || 0

        getListFunc(opts)
      }
    })
  }

  function handleSizeChange(size) {
    page.pageSize = size
    sizeChangeFunc()
    getList()
  }

  function handleCurrentChange(cur) {
    page.pageNo = cur
    currentChangeFunc()
    getList()
  }

  return {
    searchForm,
    reset,
    page,
    tableData,
    handleSizeChange,
    handleCurrentChange
  }
}

组件内引用

import { reactive, ref, computed } from 'vue'
import { usePage } from '@/composables/usePage'
import testModel from '@/model/test'

// 查询参数
const searchForm = reactive({
  createEndTime: '',
  createStartTime: ''
})

// 接收 查询参数、获取列表的接口 返回 列表所需要的数据、分页参数、分页函数等
const { reset, page, tableData, handleSizeChange, handleCurrentChange } = usePage({
  searchForm,
  getListApi: testModel.getList
})

// 首次获取数据使用 reset方式即可 tableData 的数据自动更新
reset()

组合式函数其实就是一个函数接收一些参数返回一些东西，将逻辑进行封装、共用。 如果函数依赖 store、router 等

import {useStore} from 'vuex'
import {computed} from 'vue'

export const useTest = () => {
  // 获取store
  const store = useStore()
  function getOrgById(id) {
    // 使用
    const orgObj = computed(() => store.state.orgObj)
    return orgObj.value[id]
  }

  return {
    getOrgById
  }
}

总结

Composition API与组合式函数用来解决vue2中mixins带来的问题只是附带，它可以做更多做的更好。

vue3中如何使用组合式API复用代码

前言

1. 组合式 API

2. 组合式 API 的作用

3. 组合式函数

4. 示例

总结