VUE——mixins混入

Mixins（混入），一种分发 Vue 组件中可复用功能的非常灵活的方式；

实际由一个mixins.js文件，导出一个js对象，包含组件中的变量、方法、生命周期函数（如：data、components、methods、beforecreated、props等等），是一个公共的对象，各个组件可以通过引入它复用里面的功能。

什么时候使用Mixins？

当我们多个组件中数据、功能、界面很接近的时候，我们可以利用mixins将公共部分提取出来，通过mixins去封装成一个公共对象，提供给各个组件使用，跟"公共组件"相似。

怎么使用Mixins？

在src目录下（或项目中存储公共js文件目录下）创建一个mixins文件，在文件夹下创建一个mixins.js文件，内容如下

js 复制代码

// mixins.js文件内声明mixin对象
export const mixin = {
    components:{},
    data(){
    return {}
	},
    methods:{},
    beforeCreated(){}
}

js 复制代码

// 在组件中引入使用 组件直接可以访问到其变量方法
import { comMixin } from '@/mixins/mixins.js'
export default {
  mixins: [comMixin],
  data() {
    return {}
  },
  created() {},
}

使用Mixins需要注意什么？

1、Mixins的设计模式类似简单的工厂模式，其变量、方法都是独立在当前组件的，不同组件间互不影响；

2、对象合并，当mixins与当前组件有变量、方法命名一致时，组件的变量、方法会优先，覆盖mixins中的变量、方法。

3、生命周期函数，mixins内的会优先执行，组件的后执行。

4、异步请求函数返回值，无法直接获取返回值，需要直接返回异步函数，.then()获取。

Mixins、Vuex、公共组件的差别

	Mixins	Vuex	公共组件
官方介绍	一种分发Vue组件中可复用功能的一种灵活方式	全局状态管理库	可重用的UI元素
设计模式	简单工厂模式	单例工厂模式	简单工厂模式
功能	共用变量、方法	实现跨组件的通讯，实现数据共享；	共用HTML、变量、方法
本质	js对象	store对象	html
独立性	变量、方法混入当前组件	独立	父子组件相对独立
不同	可以复用当前组件的变量、方法（data、methods、生命周期函数）	纯粹全局管理数据	复用共有组件的UI元素、变量、方法