乐趣区

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

jiezi

前言

在前端开发中，作为开发者对于 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 的特点，既有长处也有毛病，所以要依据理论状况来抉择应用。具体如下所示：

长处

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

毛病

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

拓展：mixin 混入和 Vuex 的区别

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

最初

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

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

退出移动版