关于前端:关于vue混入mixin我想说的话

4次阅读

共计 884 个字符,预计需要花费 3 分钟才能阅读完成。

之前在公司复用其余我的项目的代码做开发的过程中,常常遇到混入的写法,因为以前学习的时候对混入这个性能并没有做深刻的了解和具体的钻研,所以在遇到混入的时候基本上都是一头雾水,以至于在开发中遇到应用混入的中央就发懵。

1. 混入是干什么的:

看完这段介绍之后只能说将信将疑,那它到底是什么又怎么应用呢。。。

这张草图。。。示意三个组件中存在同样的数据,也就是可复用的局部,而后再像提取公因式一样,将这三个组件之中雷同的局部抽离进去,写到混入对象中去。接下来只须要在每一个组件中应用这个混入对象,那么混入对象中的全副选项都可能被这个组件所应用。多说无益,上代码:

冗余的代码。。。看后果:

而后应用混入革新:

看后果:

这就是混入的性能,其实它可能对前端代码进行很好的优化,一些可复用的代码应用混入之后会变得很清新,代码也不会那么冗余,神清气爽,沁人心脾。

2. 选项合并:
(1)下面的代码不难看出,混入对象相当于和组件内的代码进行了一次合并,那如果合并的时候有雷同命名的选项或数据会产生什么呢?

看后果:

组件数据优先,但因为不会报错,所以在应用混入对象时,还须要注意命名的问题,尽量不要重名。

(2)如果合并的是钩子函数呢?将钩子函数合并成一个数组,先执行混入对象中的同名钩子,再执行组件中的同名钩子。

看后果:

(3)合并值为对象的选项如 methods、computed 等,将被合并成一个对象,并且组件优先。

看后果:

因为。。。所以。。。尽量不要重名。

(4)小结:合并数据和对象选项时,同名数据组件优先;合并钩子时,生成数组都被执行。

3. 全局混入:上面的代码尽量不要写。。。

看看后果:

为什么多输入了一次?因为根实例也挂上了全局混入对象。。。所以这个货色最好不必,因为它会影响每一个 Vue 实例。

难道全局混入真的一无是处吗?并不是,甚至它还有些弱小:

看后果:

它能够用来自定义选项,并且注入逻辑,接着上代码:

看后果:

尽管有点脱了裤子放屁的滋味,但好在可能阐明问题。。。

总结:部分混入可能简化代码,但在应用的时候须要留神命名问题,以及选项合并的规定和优先级。好,明天也是一个为了写出丑陋的代码而致力的打工人。

正文完
 0