当前位置: 首页 > Web前端 > vue.js

关于vuemixin(mixin)我想说的

时间:2023-04-01 10:59:51 vue.js

公司之前复用其他项目的代码进行开发,经常遇到mixin写法,因为我在学习的时候对mixin的功能没有深入的了解。并且详细的研究,所以遇到mix-in的时候基本都是一头雾水,以至于在开发的时候遇到mix-in一头雾水。1.mixingin有什么用:看完这个介绍,只能说半信半疑,那么到底是什么东西,怎么用。..这个草图。..意思是三个分量中存在相同的数据,即可重用的部分,然后像提取公因子一样,提取三个分量中相同的部分写入混合对象。接下来,你只需要在每个组件中使用这个mix-in对象,那么这个mix-in对象中的所有选项都可以被这个组件使用。多说没用,代码:冗余代码。..看结果:然后用mix-in变换:看结果:这就是mix-in的作用。其实可以很好的优化前端代码。一些可重用的代码使用mix-in后会变得很清爽,代码不会那么冗余。郁,神清气爽。2.选项合并:(1)从上面的代码不难看出,混入的对象相当于和组件中的代码进行了一次合并,那么如果当合并?看结果:首选组件数据,但由于不会报错,所以在使用混入对象时,也需要注意命名问题,尽量不要重名。(2)合并了钩子函数怎么办?将钩子函数合并到一个数组中,先执行混合对象中的同名钩子,再执行组件中的同名钩子。看结果:(3)合并值为对象的选项,如methods、computed等,将合并为一个对象,组件优先。看结果:因为。..所以。..尽量不要重名。(4)Summary:合并数据和对象选项时,同名的数据组件优先;合并钩子时,将执行所有生成的数组。3.全局混入:下面的代码尽量不要写。..看结果:为什么又输出了一次?因为根实例也挂在全局mixin对象上。..所以最好不要用这个东西,因为它会影响每一个Vue实例。全局mixins真的没用吗?不,甚至还有点厉害:看结果:可以用来自定义选项和注入逻辑,然后上代码:看结果:虽然有点像脱裤子放屁,但还好,可以说明问题。..总结:部分混合可以简化代码,但是使用的时候需要注意命名问题,以及选项合并的规则和优先级。嗯,今天也是努力写出漂亮代码的工作者。