Vue2 中三种逻辑复用方法

更新日期: 2020-09-17阅读: 2.4k标签: vue

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

增加了缩进,降低代码可读性

需要更多的配置

暴露的属性只在模板中可用,降低灵活性

需要存在多个组件实例,性能更低

来自:https://www.cnblogs.com/jsmax/p/13721063.html


链接: https://www.fly63.com/article/detial/9682

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

Vue响应式开发,深入理解Vue.js响应式原理

深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML

vue中慎用style的scoped属性

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离

Vue2.0用户权限控制解决方案

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!