Vue逻辑复用-mixins和组合式函数

Vue逻辑复用 – mixins和组合式函数

1、mixins

mixins是Vue2.x Options API中用于处理逻辑复用的常见方式，mixins的一些属性:

⑴.mixins的生命周期钩子及data、methods、computed等对象和函数会被整合到引用它的组件内。其中，相同类型的钩子函数会被添加到存储钩子的数组中，mixins里的钩子函数会优先调用；而同名的属性和方法会被组件里的覆盖。

⑵.组件引入多个mixins时，最后mixins的属性和方法会覆盖前面的。

下面是一个实例，在AboutView.vue组件引入了add.js和increase.js。出现了mixins命名冲突（increase.js将add.js里的计算属性double覆盖了），计算属性double的值一直是y的两倍，下面的view.gif图也验证了以上说法。

 图1  在计算属性double相同时，引入多个mixins的代码示例

图2  在计算属性double相同时，引入多个mixins的网页示例

2、组合式函数

基于以上mixins的属性，vue官网[1]给出了三个主要的短板：

⑴.不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。

⑵.命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。

⑶.隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。

什么是“组合式函数”？

“组合式函数”是指使用vue3 组合式API封装和复用有状态逻辑的函数。

分别将上述add.js和increase.js文件写成组合式函数（组合式函数中使用 ref + 解构模式，让属性和方法的来源在消费组件时一目了然）的形式：

图3  组合式函数useAdd代码结构

图4  组合式函数useIncrease代码结构

图5  引入函数useAdd和useIncrease的AboutView.vue组件

图6  引入组合式函数时，AboutView.vue组件网页示例

从AboutView.vue组件和gif动图可以看到：

⑴.通过调用组合式函数，解决了数据来源不清晰；

⑵.通过解构对属性double进行重命名解决mixin 命名冲突问题。

更好的是，一个组合式函数里可以嵌套一个或多个组合式函数，例如将increase.js里累加器部分抽离成一个组合式函数,这样多个组件中就可以复用相同的逻辑了，可以把这个逻辑以一个组合式函数usePlus提取出来。 此时，increase.js可以写成如下形式，基于这个思路，一个复杂的应用可以抽离成多个可以逻辑复用的组合式小函数。同时简化及改善了代码结构。

图7  累加器的组合式函数写法

图8  简化后的组合式函数useIncrease的代码结构

最后，抽离一个查询列表内容的组合式函数。其中，从消费组件传入的是请求参数和获取列表函数，抛出的是列表内容、分页参数、分页函数、重置函数。

图9  列表查询的组合式函数示例

3、总结

由以上示例可知，组合式函数解决了mixins引起的所有问题(不清晰的数据来源，命名冲突等)，这也是Vue3中组合式API出现的原因之一。除此之外，组合式函数还有方便代码维护、易于逻辑复用 、改善代码结构等优点。

参考文档

[1] cn.vuejs.org/guide/reusa…