后台项目做多了就会发现，在一个成熟的后台项目中，列表页面的结构以及逻辑都是相对固定的，怎样才能把重复的这部分提取出来呢

哪些需要提取

项目里用的 UI 库是 Element UI 。一个列表页从 UI 表现来看上至下通常包含这么几部分：筛选栏，列表，分页。在 vue 单文件组件中看的话，主要是模板区和 js 区，项目里列表页一般是统一风格，所以公共样式不会写在列表组件里。首先模板部分我认为是不需要提取出来的，一方面是因为用了 element 表格组件，二次封装会使传值等变的更为复杂，另一方面是封装过后在可读性上有很大的损失

怎么封装

由于只提取了公共的逻辑，模板部分未有提取，而且每个列表页调用的 api 也不同，选择采用 mixin 的方式，在 mixin 中定义公共的数据变量以及方法，在对应的业务单文件组件中引入。mixin 的特性可以在 官方文档 中了解，通过这种方式优点是可以提取公共逻辑，并且可以在混入的地方通过新声明覆盖旧声明的方式重写；缺点是通过 mixin 引入的内容在业务页面是没法直接看到的，这也是使用 mixin 的主要问题。在项目的协作开发，我们采用约定开发的方式，使用者要了解页面所使用的 mixin ，这样可以降低使用 mixin 导致出问题的几率

成果

通过这样的方式，将同类业务中相同的逻辑抽离出来，列表页面的逻辑被简化，后续的业务迭代中只需很少的代码即可实现需求，公共的逻辑在 mixin 中统一维护，提高开发效率

总结

上述示例是稍复杂的应用，若只是展示列表，只需重置 data 中的数据即可