vue中的mixin

vue中的mixin可以实现组件中重复代码的高度复用，可以将不同组件中重复的组件选项（如，data、created、mounted、components、computed、watch等）都提取出来，形成一个mixin的js文件，在需要用到这些代码时，引入这个js文件即可。

具体用法：

// mixin.js
export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

// 组件中
import mixin from './mixin.js'; // 引入mixin文件
export default {
 // mixins 是一个数组，可以引入多个mixin的js文件
 mixins: [mixin]
}

mixin的特点：

• 组件引入一个mixin文件后，可以直接使用mixin文件中定义的任何变量、方法等，就像是在本组件内部定义的一样

• mixin中的 data、provide 会和引用组件中的data合并，有冲突时，mixin中的data会被覆盖，以组件中定义的为准；若为对象，则进行深度合并（合并型合并）

• mixin中的函数（如watch和created、mounted等钩子函数）中的方法，不会产生覆盖，且mixin中的方法会在组件中的钩子函数之前调用（队列型合并）

• mixin中的对象（如props、methods、inject、computed等）中的值，在组件中若有同名的键名存在，则mixin中的会被覆盖，以组件中定义的为准（替换性合并）

• mixin中的 component、directives、filters 中的值，若组件中有同名的键名存在，则优先使用组件中的值；若组件中没有，则去mixin中寻找（叠加型合并）

• 若一个mixin文件被不同组件引用，mixin中的data中定义的数据，相对于每个引用它的组件来说，是独立的，即在A组件中改变了mixin中的变量a值，在B组件中a的值还是mixin中定义的初始值。

  注：
  	这也是mixin和vuex的区别，在vuex中定义的变量，在一个组件中改变了它的值，那么所有引用这个变量的地方，值都会同步改变。
  

• 在组件中引入mixin之后，会将mixin中的选项都进行融入合并，对象中（如methods、computed）的值以组件中定义的为准，函数中（如watch、created）的值会和组件中的同时存在，mixin中的先被调用

  注：
  	所以，mixin和子组件的区别，就是，当父组件引入子组件时，它们还是相对独立的两个组件，通过props进行传值；当组件引入mixin时，会融合mixin中的选项值，相当于会形成一个新的组件。
  

mixin的缺点：

• 命名冲突
• 隐式依赖（mixin也可以使用组件中定义的属性，若组件中的属性名发生改变，那么不好检查出来，只有在运行时才会发现报错）