欢迎光临
我的个人博客网站

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 的缺点,但是也有其特有的缺陷:

  • 增加了缩进,降低代码可读性
  • 需要更多的配置
  • 暴露的属性只在模板中可用,降低灵活性
  • 需要存在多个组件实例,性能更低
赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue2 中三种逻辑复用方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏