我看vue之mixins助力项目开发

Posted 2022-05-28 恪愚

背景

我们通常会遇到这么一个场景：有几个基本功能一样的组件，但是他们之间又存在着足够的差异。这时候你就来到了一个岔路口：我是把他们“按部就班”地写成不同的组件呢？还是保留为一个“公共组件”，然后通过props传参进行不同功能之间的区分呢？

现在还有一个场景：在一些组件（甚至是项目中全部和某个功能有关的组件）中，有某个功能是相同的。而且都需要利用这个功能进行后续操作。你又需要选择了，但是这次有一个前提：肯定是要“复用”的 —— 公共组件？还是 mixin ？

我们现在来分析下：
在第一个场景中，其实两种解决方案都不够完美：如果拆分成多个组件，你就不得不冒着一旦功能变动就要在所有相关文件中更新代码的风险，这违背了 DRY 原则；反之，太多的 props 传值会让代码变得混乱不堪，后续难以维护、团队理解困难，效率降低。
而在第二个场景中，其实我们很清楚地看到：这时候我们需要的不是一个可以传值的组件，而是一个类似于插件一样的 js 代码（这么说能够理解吧）！

使用Mixin吧

Vue 中的 Mixin 对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解。Mixin 允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西。因此哪怕执行多次，只要是同样的输入你总是能得到一样的值。

如何使用

mixin其实有两种写法 —— Object<

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系