为什么在vue中不要使用mixins（混合）

为什么在vue中不要使用mixins（混合）

今天之前，我对mixins的理解就是：

​提取一个或多个vue文件里的公用代码，这个公用代码可以是vue文件里各个生命周期的代码，提取出来后可以组成一个拥有相应生命周期的js文件，然后将这个文件通过mixins引入到需要的vue文件中，这样mixin中的代码就可以复用了。 描述不好，大致就是提取公用代码，实现代码复用。
​

​相信大部分人若是没有真正的遇到mixins问题之前，都是以为就是提取公共代码嘛，和用js提取公用工具函数一样，只不过mixins多了vue的生命周期，还方便文件混合，这多方便

​但是今天我是遇到了mixins的神操作了，只能说惊着我了。举个栗子：

现在有两个mixins文件，test1.js文件,里面代码如下：

export default {
 	data() {
 	 	return {
  	 		test1num: 0,
  	 		test1str:“啦啦啦哈哈哈”
  		}
	 },
	 methods:{
		test1method1(){
			console.log(‘我是test1中的方法test1method1’)
		},
		test1method2(){
			console.log(‘我是test1中的方法test1method2’)
		},
	}
 }

test2.js文件，代码如下：

export default {
 	data() {
 	 	return {
  	 		test2num: 0,
  	 		test2str:“略略略”
  		}
	 },
	 methods:{
		test2method1(){
			console.log(‘我是test2中的方法test2method1’)
		},
		test2method2(){
			console.log(‘我是test2中的方法test2method2’)
		},
		test2method3(){
			this.test1method2()
		}
	}
 }

将这两个js文件通过mixins混合到index.vue中，如下：

<template>
	 <div>
  		<div>test1num:{{test1num}}</div>
 		<div>test1str:{{test1str}}</div>
 		<div>test2num:{{test2num}}</div>
  		<div>test2str:{{test2str}}</div>
	 </div>
</template>
<script>
export default {
  mixins: [callbackMixin, otherMixin],
  data() {
 	 	return {
  	 		num: 0,
  	 		str:“开开心心”
  		}
  },
 created(){
 	this.test();
 },
 methods:{
		test(){
			console.log(this.str+this.num)
			this.test1method1();
			this.test2method3();
		},
	}
}

在运行后，控制台会打印什么呢？

开开心心0
我是test1中的方法test1method1
我是test1中的方法test1method2

不知道现在大家发现没，this.test1method1();可以执行成功，因为mixins混合的缘故很正常；但是this.test2method3();为啥也能执行成功，还执行了test1文件里的方法。

那么问题又来了，test1.js文件与test2.js文件没有相互引用，为什么test2.js里还能调用test1.js里的方法？
其实这也是mixins混合造成的，混合之后，各个mixins之间也能相互调用属性

嗯，这样又有人说这样不是很好？可以很方便的将一个大文件各种拆分，提取各种的公共代码，进行复用。

这样想的还是太年轻，没遇到这样神坑，当你使用mixins去提取公用代码时，若是一个mixins文件，那还好说，怎样都行；当mixins文件达到多个，去维护修改时就会不知道这个方法、属性来自那个mixins文件；更不用说，若是每个mixins文件功能不独立，mixins之间相互调用，那就真的是一团乱麻了，就算自己写的，过两天来看，也是一脸懵逼，那时就是 开发一时爽，维护火葬场了。

今天我就遇到了这样的代码，分公司另一条产品线写的，我帮着改bug，可把我给绕晕了。大家还是能不用就别用，少用一个，就少一根无辜的头发掉下来，说不定那天这根头发就是你头上的呢？