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

混入（Mixins）是Vue2.x Options API中用于处理逻辑复用的常见方式。混入的一些属性包括生命周期钩子、数据、方法和计算属性等。混入的生命周期钩子及数据、方法、计算属性会被整合到引用混入的组件内。相同类型的钩子函数会被添加到存储钩子的数组中，混入里的钩子函数会优先调用。同名的属性和方法则会被组件里的覆盖。引入多个混入时，最后混入的属性和方法会覆盖前面的。实例中，AboutView.vue组件引入了add.js和increase.js，出现混入命名冲突，计算属性double的值一直是y的两倍。

基于混入的属性，Vue官网指出混入存在三个主要的短板：不清晰的数据来源、命名空间冲突和隐式的跨混入交流。混入使追溯实现和理解组件行为变得困难。多个混入可能注册相同的属性名，造成命名冲突。多个混入需要依赖共享的属性名进行相互作用，使得它们隐性地耦合在一起。因此，混入引入了数据来源不清晰、命名冲突和隐式依赖的问题。

为了解决以上问题，Vue3引入了组合式函数。组合式函数是使用Vue3组合式API封装和复用有状态逻辑的函数。组合式函数通过ref和解构模式解决数据来源不清晰的问题，通过解构对属性进行重命名解决混入命名冲突问题。组合式函数可以嵌套一个或多个组合式函数，简化和改善代码结构，便于代码维护和逻辑复用。例如，可以将increase.js里的累加器部分抽离成一个组合式函数，多个组件中复用相同的逻辑。同时，组合式函数可以接受请求参数和获取列表函数，抛出列表内容、分页参数、分页函数和重置函数。这使得组合式函数在复杂应用中可以抽离成多个可以逻辑复用的组合式小函数，改善代码结构。

总结而言，组合式函数解决了混入引起的所有问题，包括不清晰的数据来源、命名冲突和隐式依赖。此外，组合式函数还有方便代码维护、易于逻辑复用、改善代码结构等优点。通过使用组合式函数，可以更清晰地管理组件的逻辑，提高代码的可读性和可维护性。

参考文档：[1] cn.vuejs.org/guide/reus...

您可能感兴趣问答

Collapsible

热门标签

热点问答