Vue2 中三种逻辑复用方法

Mixins

Mixin对象能够使用组件的任何属性（data，mounted，created，update等），而且当组件使用mixin时，这个mixin的所有信息也会混合到这个组件里，这个组件就能够访问到所有mixin的属性就像申明在自己对象中一样。

沿用 《Vue 3.0 特性指南（一） - 为什么要引入组合式 API？》 中的搜索和排序的例子，想使用 Mixins ，需要先创捷它们各自的 Mixin 对象，然后在组件中引入 ：

const productSearchMixin = {     data() {         return {             // 搜索变量         };     },     methods: {         // 搜索方法     }, }; const resultSortMixin = {     data() {         return {             // 排序变量         };     },     methods: {         // 排序方法     }, }; export default {     mixins: [productSearchMixin, resultSortMixin], }; 

这样代码就是按照功能来组织的，但是 Mixins 也有缺点：

• 需要注意命名冲突，具体可以看 Vue 官网选项合并这部分：混入 - Vue.js
• 不清楚这些 mixins 如何互相作用的，如果 mixins 嵌套，会很难理解
• 不可定制，并没有那么容易进行复用，按上面的例子，项目中如果需要筛选产品、用户以及评论之类的场景，就要编写不一样的 mixin 对象

Mixin Factories

Mixin 工厂函数可以根据传入的配置返回定制的 mixin 对象，举个栗子：

// mixins/factories/search.js export default function searchMixinFactory({ ... }) {     // 搜索功能 }  // mixins/factories/sorting.js export default function sortingMixinFactory({ ... }) {     // 整理功能 }  // search.vue import searchMixinFactory from '@mixins/factories/search'; import sortingMixinFactory from '@mixins/factories/sorting';  export default {     mixins: [         productSearchMixin({             namespace: 'productSeatch',             // ...搜索配置参数         }),         resultSortMixin({             namespace: 'resultSorting',             // ...排序配置参数         })     ], }; 

这样一来，我们可以通过传递不同配置来获得我们需要特定场景下的 mixin 对象，而搜索和排序中通用的逻辑得以复用；功能互相作用也有了更清晰的关系。但是使用这种方法需要注意的：

• 严格的命名空间限制
• 还是需要看看 mixins 的内部逻辑，以求知道它们具体做了什么事
• mixin 工厂函数 不能动态生成

Scoped Slots

Vue2 中第三种逻辑复用的方法是使用作用域插槽，即 Scoped Slots，首先创建三个文件：

// components/generic-search.vue <script> export default {     props: ['getResults'],     // 搜索功能 } </script>  <template>     <div>         <slot v-bind="{ query, results, run }" />     </div> </template> // components/generic-sorting.vue <script> export default {     props: ['input', 'options'],     //  } </script>  <template>     <div>         <slot v-bind="{ options, input, output }" />     </div> </template> // search.vue ... <template>     <GenericSearch :get-results="getProducts" v-slot="productSearch">         <GenericSorting             :input="productSearch.results"             :options="resultSortingOptions"             v-slot="resultSorting"         >         ... </template> 

我们在 search.vue 中使用这些组件发送特定产品搜索的配置，这几乎解决了所有 mixins 的缺点，但是也有其特有的缺陷：

• 增加了缩进，降低代码可读性
• 需要更多的配置
• 暴露的属性只在模板中可用，降低灵活性
• 需要存在多个组件实例，性能更低