为什么在vue中不要使用mixins(混合)
为什么在vue中不要使用mixins(混合)今天之前,我对mixins的理解就是:提取一个或多个vue文件里的公用代码,这个公用代码可以是vue文件里各个生命周期的代码,提取出来后可以组成一个拥有相应生命周期的js文件,然后将这个文件通过mixins引入到需要的vue文件中,这样mixin中的代码就可以复用了。 描述不好,大致就是提取公用代码,实现代码复用。相信大部分人若是没有真正的遇到mi
为什么在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,可把我给绕晕了。大家还是能不用就别用,少用一个,就少一根无辜的头发掉下来,说不定那天这根头发就是你头上的呢?
更多推荐
所有评论(0)