第 008 期 用 Composition API 重构 Mixins 代码

在 Vue 中，Mixins 可以包含任意组件的选项。这使得用 Mixins 能很方便的抽象多个组件间的公共部分，但也会带来一些问题:

1. 命名冲突导致的运行结果的不确定性。组件 和 引入的 Mixins，引入的多个 Mixins 之间，都会出现数据名，方法名的命名冲突。出现命名冲突时，同名的数据或方法会被覆盖，对应的业务也就出错了。
2. 隐式依赖导致的高耦合。组件 和 引入的 Mixins 之间会出现互相依赖的情况，如果依赖的数据或方法重命名了，数据或方法就找不到了。

Composition API 可以很好的解决这些问题。组件可以用 Composition API 暴露出的可响应数据。组件和 Composition API 不能读取和修改各自内部的数据和方法。

解决方案

我们来看个 Demo。做一个管理后台的列表页。列表页支持筛选搜索，显示列表，列表分页的功能。

用 Mixins 实现

可以将需要的组件的引入；列表，搜索条件分页数据；以及数据的交互放到 Mixins。如下:

列表页这么写:

用 Composition API 重构

我们用 Composition API 来重构上面的 Mixins。如下:

列表页这么写:

参考文档

• Vue3 Composition API 如何替换 Vue Mixins
• Composition API