vue混入mixin流程与优缺点详解

目录
  • 1、什么是mixin
  • 2、mixin与Vuex的区别
  • 3、mixin的使用
    • 3.1、局部混入
    • 3.2、全局混入
  • 4、mixin选项合并
    • 4.1、生命周期函数
    • 4.2、data中的数据冲突
    • 4.3、方法冲突
  • 5、优缺点
    • 5.1、优点
    • 5.2、缺点
  • 6、利用mixin开发一个UI库

1、什么是mixin

这不是Vue的专属的,可以说是一种思想,在很多开发框架中都实现了Mixin。

官方解释:

mixin提供了一种非常灵活的方式,来分发Vue组件中可复用的功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

自己的理解:

将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。这样可以减少代码冗余度,也可以让后期维护起来更加容易。

2、mixin与Vuex的区别

vuex: 公共状态管理,如果在一个组件中更改Vuex中的某个数据,name其他所有引入了Vuex中该数据的组件也会跟着变化;

Mixin: 中的数据和方法都是独立的,组件之间使用后是相互不影响的。

3、mixin的使用

可以理解为一个对象。只不过这个对象里面可以包含Vue组件中的一些常见配置。如data,methods,created。

3.1、局部混入

<script>
//1、引入
import MyMixin from "../../mixin/index"
export default {
  //使用
  mixins: [MyMixin],
}
</script>

3.2、全局混入

在main.js中配置全局混入,请谨慎使用全局混入,因为它会影响每个单独创建的Vue实例。推荐将其作为插件发布,以避免重复应用混入。

import Mixin from "./mixin";
Vue.mixin(Mixin)

4、mixin选项合并

mixin中定义的属性或方法名称与组件中定义的名称冲突了,该怎么办?

当发生了冲突,默认使用或执行组件内部的数据或方法。

4.1、生命周期函数

确切来说不算冲突,因为生命周期函数的名称都是固定的。默认的合并策略如下:

先执行mixin中生命周期函数中的代码,然后执行组件内部的代码。

4.2、data中的数据冲突

当mixin中的data数据和组件中的data的数据冲突时,组件中的data数据会覆盖mixin中数据。

4.3、方法冲突

命名方法的名字一样就会冲突。

可以自定义合并规则解决冲突,但是感觉没必要,这使项目更加复杂了

5、优缺点

5.1、优点

  • 提高代码复用性
  • 无需传递状态
  • 维护方便,只需要修改一个地方

5.2、缺点

  • 命名冲突
  • 滥用的话后期很难维护
  • 不好追溯源,排查问题稍显麻烦
  • 不能轻易的重复代码

6、利用mixin开发一个UI库

简单案例

创建Button.vue组件

<template>
  <div class="Button">
    <button :class="['my-btn', btnStyle]">
      <slot></slot>
    </button>
  </div>
</template>
<script>
export default {
  name: "Button",
  props: {
    btnStyle: {
      type: String,
      default: 'btn-primary'
    },
  },
}
</script>
<style scoped>
.my-btn {
  height: 34px;
  padding: 0 15px;
  border: none;
  background-color: #874b4b;
  color: #fff;
}
.my-btn.btn-primary {
  background-color: blue;
  /*color: #fff;*/
}
.my-btn.btn-danger {
  background-color: red;
  /*color: #fff;*/
}
</style>

在index.js中引入并暴露:

import MyBtn from "./MyUI/Button";
export default {
    components:{
        MyBtn
    }
}

在组件内混入使用的方法

<template>
  <div class="MixinStudy">
    <!--    通过Mixin写的一个UI组件button-->
    <MyBtn btnStyle="btn-danger">点击</MyBtn>
  </div>
</template>
<script>
import MyMixin from "../../mixin/index"
export default {
  name: "MixinStudy",
  mixins: [MyMixin],
}
</script>

全局混入的使用方法

main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Mixin from "./mixin";
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false;
Vue.mixin(Mixin)
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
//组件中
<template>
  <div class="MixinStudy">
    <!--    通过Mixin写的一个UI组件button-->
    <MyBtn btnStyle="btn-danger">点击</MyBtn>
  </div>
</template>
<script>
export default {
  name: "MixinStudy",
}
</script>

到此这篇关于vue混入mixin流程与优缺点详解的文章就介绍到这了,更多相关vue混入mixin内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 深入了解Vue.js 混入(mixins)

    混入 (mixins)定义了一部分可复用的方法或者计算属性.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 来看一个简单的实例: var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var myMixin = { created: function () { this.startmixin() }, methods: { startmix

  • 讨论vue中混入mixin的应用

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 即 mixin 在引入组件之后,会将组件内部的内容如data.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了. 比如在两个不同的组件的组件中调用sayHi方法,需要重复定义,倘若方法比较复杂,代码将更加冗余,但使用mixins 就相对比较简单了. 首先

  • Vue之mixin混入详解

    目录 局部混入 全局混入 总结   局部混入 <template> <div> <h2 @click="showName">学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> </div> </template> <script> //引入一个混合 import { hunhe,hunhe2 } from '../mixin' export defa

  • vue混入mixin的介绍及理解

    目录 一.mixin是什么 二.使用场景 三.原理分析 四.mixin的理解 一.mixin是什么 mixin是面向对象程序设计语言中的类,提供了方法的实现.其他类可以访问mixin类的方法而不必成为其子类: mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂. 本质就是一个JS对象,可以包含组件中的任意功能选项,如data.components.methods.creaded.computed以及生命周期函数等等. 只需要将共用的功能以对象的方式传入m

  • vue3  mixin 混入使用方法

    目录 一.mixin 如何使用 ? 二.mixin 使用时注意点 2.1.使用 mixin 对象时,组件内部和 mixin 包含相同选项,如何处理呢? 2.2.使用的 mixin 对象选项 和实例中的选项拥有相同的属性该如何处理? 2.3.mixin 对象也可以添加生命周期钩子函数 三.mixin 自定义属性 四.合并策略 五.全局配置 mixin vue 2 中采用选项式API 如: data.methods.watch.computed以及生命周期钩子函数等等. mixin 混入,提供了一种

  • Vue 详解mixins混入用法大全

    目录 前言 一.什么是Mixins? 二.什么时候使用Mixins? 三.如何创建Mixins? 四.如何使用Mixins? 五.Mixins的特点 六.Mixins合并冲突 七.与vuex的区别 八.与公共组件的区别 前言 当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch.mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixin

  • vue中混入mixins的使用方法

    目录 前言 使用方法 总结 前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的.同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项.应用场景 下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时,

  • vue混入mixin流程与优缺点详解

    目录 1.什么是mixin 2.mixin与Vuex的区别 3.mixin的使用 3.1.局部混入 3.2.全局混入 4.mixin选项合并 4.1.生命周期函数 4.2.data中的数据冲突 4.3.方法冲突 5.优缺点 5.1.优点 5.2.缺点 6.利用mixin开发一个UI库 1.什么是mixin 这不是Vue的专属的,可以说是一种思想,在很多开发框架中都实现了Mixin. 官方解释: mixin提供了一种非常灵活的方式,来分发Vue组件中可复用的功能.一个混入对象可以包含任意组件选项.

  • Vue混入使用和选项合并详解

    目录 1.在组件中使用 2.选项合并 总结 1.在组件中使用 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. <template> <div class="event_style"> <h2>基础</h2> <div class="inner_children

  • Vue之mixin全局的用法详解

    先贴上官方定义. 个人觉得全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on) 使用场景:货币单位,时间格式.这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高. ex: step1: 先定义mixin.js const mixin = { methods: { /** * 格式化时间 * @param {string|number|object|Array} dateTime - 时间,可以是一个字符串.时间戳.

  • python 中Mixin混入类的使用方法详解

    目录 前言 Mixin 与继承的区别 总结 前言 最近在看sanic的源码,发现有很多Mixin的类,大概长成这个样子 class BaseSanic(    RouteMixin,    MiddlewareMixin,    ListenerMixin,    ExceptionMixin,    SignalMixin,    metaclass=SanicMeta, ): 于是对于这种 Mixin 研究了一下,其实也没什么新的东西,Mixin 又称混入,只是一种编程思想的体现,但是在使用

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • Vue.js之mixins混合组件详解

    混合以一种灵活的方式为组件提供分布复用功能.混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被"混入"组件自己的选项中. 一.Mixins的基本用法 现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <div id="app"> <p>num:{{ num }}</p> <P><but

  • Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项

  • vue组件三大核心概念图文详解

    前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

  • 发布订阅模式在vue中的实际运用实例详解

    订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]

  • Vue项目接入Paypal实现示例详解

    一.支付流程 在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验. 二.实现方案 接入方式 优点 缺点 相关资料 在html中插入paypal的script脚本 实现方式比较简单 1.安全性问题:公司的client_id会暴露在代码中 2.引用的按钮样式比较难自定义 官方文档:https://developer.paypal.com/docs/checkout/integr

随机推荐