关于前端:前端开发Vue混入mixin的使用

前言

在前端开发中，作为开发者对于Vue框架的应用不用多说，Vue的框架也是目前最为好用的框架之一，尽管Vue3.0曾经成为了支流版本（Vue2.0和Vue3.0还是有不少差异的），但丝毫不影响开发应用。本篇博文分享一个对于Vue相干的比拟重要的知识点—-混入(mixin)，该内容在理论开发中比拟罕用，也比拟重要，所以须要灵活运用，尤其是刚接触Vue不久的开发者甚为重要。

混入/混合的概念

Vue官网释义：

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

混入/混合(Mixin)是一种为 Vue 组件散发可重用性能的灵便形式。mixin 对象能够蕴含任何组件选项。当组件应用mixin时，mixin中的所有选项都会“混合”到组件本人的选项中。

集体了解：

混入/混合(Mixin)是Vue给开发者提供的一种混入实例的办法，定义一部分可复用的办法或者计算属性，蕴含任意组件选项，当组件应用混入对象的时候所有混入对象的选项将被混合进入该组件自身的选项，也就是通过创立混入对象之后，自定义的办法或变量都能够很容易挂载在Vue实例上，不便开发。

Vue混入(Mixin)

1、参数

{Object} mixin

2、用法

全局注册一个混入，影响注册之后所有创立的每个Vue实例。插件开发能够应用混入，向组件注入自定义的行为，然而不举荐在利用代码中应用。

Vue混入的形式

Vue.mixin提供两种混入形式：全局混入和部分混入。

1、全局混入

次要是通过Vue.mixin()进行全局混入，应用全局混入须要留神的是它会影响到每一个组件实例（蕴含第三方组件），个别状况下在写插件的时候会应用全局混入。混入对象能够成为一个可复用的性能，在其余的组件中引入已定义的混入对象，可实现同样的逻辑与性能，也就是可复用性。

示例：应用全局混入。
间接在我的项目的main.js文件中退出如下代码：

Vue.mixin({
data() {
 return {
   title: "Vue",
  }
},
created: function () {      
   console.log("全局")    
},
methods: {
  mixinMethods() {
     console.log("====>>>",this.title)
    }
  }
})

具体组件中援用的代码如下所示：

<template>
  <div>{{title}}</div>
</template>
<script>
export default {
  data() {
    return {}
  }
   mounted() {
     this.mixinMethod()   //输入后果： Vue
   }
}
</script>

2、部分混入

部分混入个别是在定义一个mixin对象，如组件options的data、methods等属性，如下所示：

var commonMixin = {
    created: function () {   
          this.fun() ;
    },
     methods: {   
      fun: function () {      
        console.log('This is Mixin');   
      }
    }
}

应用的时候，组件通过mixins属性调用mixin对象，如下所示：

Vue.component(
  'componentAAA',  {  mixins: [commonMixin] }
)

下面的组件在应用的时候，混合了mixin外面的办法，在主动执行create生命钩子的时候，执行fun办法。

示例：部分混入应用
在组件componnets目录下创立一个mixins文件夹，且在该文件夹下创立一个mixins.js文件，代码如下所示：

const mixins = {
data() {
return {
title: "Vue"
}
},
methods: {
mixinMethods() {
console.log("====>>>",this.title)
}
}
}
export default mixins;

在具体须要的界面援用的代码如下所示：

<template>
<div>{{title}}</div>
</template>
<script>
import mixins from '../mixins/mixins'
export default {
mixins: [mixins],
data() {
return {}
}
mounted() {
this.mixinMethods() ;// 输入后果：Vue
}
}
</script>

3、个别办法合并的操作

如果混入值是对象的选项，如methods、components等，在进行递归合并操作时，把被混合为同一个对象，如果两个对象的键名因为一样而抵触的时候，将应用适当的策略合并操作，如数据对象进行递归合并，在发生冲突时组件的数据优先，会取组件对象中的键值对，而混入mixin的对象键值对会被疏忽。具体示例如下所示：

<body>
<div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
var commonMixin = {
methods: {
mixinA: function() {
console.log('mixinA')
},
mixinB: function () {
console.log('mixinB')
}
}
}
new Vue({
el: '#app',
mixins: [ commonMixin ], 
methods: {
mixinMethods: function () {
console.log('mixinMethods')
}
},
mounted() {
this.mixinA()  //输入后果为：mixinMethods
this.mixinB() //输入后果为：mixinB
}
})
</script>

4、混入和组件钩子函数执行程序

若组件存在于mixin对象雷同选项为生命周期钩子函数的时候，会将同名的钩子函数合并到一个数组中，这样所有的钩子函数都会被调用，然而会依照先执行mixin外面的钩子函数，再执行组件的钩子函数，具体示例如下所示：

混入的文件mixins.js的代码：

const mixins = {
data() {
return{
title1: '混入内容1',
title2: '混入内容2'
}
},
created() {
console.log(this.title3)
} 
}
export default mixins;
...

具体组件的代码：

<template>
<div class="header"></div>
</template>
<script>
import mixins from './mixins/mixins'
export default {
mixins: [mixins],
name: 'Header',
data(){
return{
title1: '组件内容1',
title3: '组件内容2'
}
},
created() {
console.log(this.title2);
console.log(this.title1);
  // 输入后果程序为：我是组件内容2  我是混入内容2 我是组件内容1
},
}
</script>

5、自定义选项合并

在进行合并自定义选项的时候，会应用笼罩现有值的默认策略，若要应用自定义逻辑合并自定义选项，则须要把函数附加到Vue.config.optionMergeStrategies。示例如下所示：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}

绝对于大多数基于对象的选项，能够应用雷同的策略methods。示例如下所示：

var strategies = Vue.config.optionMergeStrategies;
strategies.myOption = strategies.methods;

6、留神

如果组件存在与mixin对象雷同选项的时候，在进行递归合并操作时，组件的选项会笼罩mixin的选项。但如果雷同选项为生命周期钩子的时候，会合并成一个数组，会依照先执行mixin的钩子函数，再执行组件的钩子函数。

实用场景

在平时的日常开发过程中，常常会遇到在不同的组件中须要用到一些雷同或者类似的性能代码块，而该局部的代码的能绝对独立，这就能够通过应用Vue的混入mixin性能将雷同或者类似的性能代码块提取进去应用。

还有就是针对一些基本功能雷同的，但又存在比拟大差异性的组件之间，也能够应用Vue中的Mixin来实现。因为Mixin对编写函数式格调的代码很有用，起因是函数式编程就是通过缩小挪动的局部让代码更好浏览，而且Mixin容许封装一个在利用的其余组件中都可应用的函数。

混入的优缺点

mixin的特点，既有长处也有毛病，所以要依据理论状况来抉择应用。具体如下所示：

长处

可复用性强，不便进步组件代码复用，不必传递状态，能够批改一个中央引起全局都被批改的成果。

毛病

变量名不明确。应用mixin的时候，在查找变量和办法名的时候，须要逐层查找，全局搜寻，不便于浏览查找和保护。所以须要在应用的时候对立放到一个地位，不便查找和保护；
如果是多个mixin的生命周期钩子函数交融到一处运行，且有同名的属性，那么同名的办法无奈交融导致被笼罩或者抵触，再遇到组件中定义的属性，办法和mixin中的同名属性，那么组件的属性会笼罩所有的mixin中的属性；
mixin和组件间接会呈现多对多的关系，复杂度自然而然就变高了，这就是说一旦滥用，遇到问题就很难追溯代码和排查问题，代码极难保护；
全局混入，如果接手我的项目不熟的新人，会造成找不到属性和办法，不便于老手保护代码。然而如果业务逻辑需要明确，性能繁多，前期无需批改，能够间接应用mixin来实现。

拓展：mixin混入和Vuex的区别

　　Vuex是状态共享治理，Vuex中的所有变量和办法都是能够读取和更改并且相互影响；
　　mixin能够定义专用的变量或办法，然而mixin中的数据是独立不共享的，即每个组件中的mixin实例都不一样，是独自存在的个体，不存在相互影响；
　　如果mixin混入对象值是函数，同名函数选项将会进行递归合并为一个数组，且两个函数都会执行，只是先执行mixin中的同名函数后执行组件的同名函数；
　　mixin混入对象值为对象，同名对象将会进行替换解决，优先执行组件内的同名对象，会把组件内的同名对象笼罩mixin混入对象的同名对象。

最初

mixin在Vue中的复用思维，是精简代码的一种形式，能够依据理论业务场景抉择应用是全局混入还是部分混入，然而不能滥用，尤其是审慎应用全局混入，因为会引起牵一发而动全身的影响。同时，混入是Vue开发应用和求职面试比拟重要的知识点，须要齐全把握它的外延，重要性显而易见，间接掌握住即可。

本文参加了「SegmentFault 思否写作挑战赛」，欢送正在浏览的你也退出。

关于前端:前端开发Vue混入mixin的使用

前言

混入/混合的概念

Vue混入(Mixin)

1、参数

2、用法

Vue混入的形式

1、全局混入

2、部分混入

3、个别办法合并的操作

4、混入和组件钩子函数执行程序

5、自定义选项合并

6、留神

实用场景

混入的优缺点

长处

毛病

拓展：mixin混入和Vuex的区别

最初

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:前端开发Vue混入mixin的使用

前言

混入/混合的概念

Vue混入(Mixin)

1、参数

2、用法

Vue混入的形式

1、全局混入

2、部分混入

3、个别办法合并的操作

4、混入和组件钩子函数执行程序

5、自定义选项合并

6、留神

实用场景

混入的优缺点

长处

毛病

拓展：mixin混入和Vuex的区别

最初

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复