Vue的混入(mixin)

一、mixin是什么

我们在开发组件的过程中，常常会遇到一些具有相同逻辑和功能的组件。

如果每个组件各写一套方法会导致代码冗余，后期更改的时候也要一个个的改非常的浪费时间和精力。

mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。

二、使用方法

先定义mixin：在src目录下新建mixin文件夹，然后新建index.js文件，该文件存放我们的mixin代码。

export const mixins = {

data() {

return {};

},

computed: {},

created() {},

mounted() {},

methods: {}

};

（1）局部混入

在组件中引入mixin，然后使用mixins

（2）全局混入

在初始化Vue之前（main.js中）调用Vue.mixin()进行全局混入

import Vue from "vue";

import App from "./App.vue";

import { mixins } from "./mixin/index";

Vue.mixin(mixins);

Vue.config.productionTip = false;

new Vue({

render: (h) => h(App),

}).$mount("#app");

三、使用场景

在开发中，经常会遇到在不同的组件中用到相同或者相似的代码，这些代码的功能相对独立；就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

四、注意事项

1. mixin对象的data数据与组件选项会进行合并，如果有冲突，组件优先级高于mixin。

2.mixin和组件中存在相同方法时，组件的方法的优先级大于mixin中。

3. mixin的事件执行顺序要优先于组件的。

4.多个组件调用同一个mixin，每个变量都是单独独立的，不会项目污染改变变量。

5. Vue3 Hooks代替了Vue2 Mixins。

6. Vue3 Hooks代替了Vue2 Mixins。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

五、mixin优缺点

优点：

提高代码复用性

无需传递状态

维护方便，只需要修改一个地方即可

缺点：

命名冲突

滥用的话后期很难维护

不好追溯源，排查问题稍显麻烦

总结

mixin给我们提供了方便的同时也给我们带来了灾难，所以有很多时候不建议滥用它，但是在有些场景下使用它又是非常合适的，这就得根据自己来取舍了。所以在很多时候我们需要考虑用公共组件还是使用mixin。