V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhennann
V2EX  ›  前端开发

2024 已过半,还没试过在 vue3 中使用 ioc 容器吗?

  •  
  •   zhennann ·
    zhennann · 149 天前 · 826 次点击
    这是一个创建于 149 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vue3 已经非常强大和灵活了,为什么还要引入 IOC 容器呢? IOC 容器离不开 Class ,那么我们就从 Class 谈起

    Class 的应用场景

    一提起 Class ,大家一定会想到这是 Vue 官方不再推荐的代码范式。其实,更确切的说,Vue 官方是不推荐基于 Class 来定义 Vue 组件。如图所示:

    image.png

    社区确实有几款基于 Class 定义组件的方案,但实际应用效果不理想,所以不被 Vue 官方推荐。这些有价值的社区实践在不同阶段给 Vue 开发带来了便利,同时也恰恰说明一个道理:

    Class 不应该用在`视图层`,而是要用到`业务层`
    

    两层架构设计

    在面向大型的业务开发场景中,需要两个层面的架构设计:

    1. 视图层:这一层架构推荐使用<script setup>,因为通过编译器语法糖确实可以使用非常简明的代码来声明 props 和 emits 的类型
    2. 业务层:这一层与业务相关。大量的工程实践证明,对于业务的建模和抽象,OOP函数式更适合

    因此,在 Vue3 中引入 IOC 容器和 Class ,与 Vue 官方的说法并不相悖,只是在业务层架构中应用ClassOOP

    两类 IOC 容器

    Zova 提供了分层的 IOC 容器,具体而言,提供了两类 IOC 容器:

    1. 全局容器

    该容器与Vue App绑定,从而实现全局状态和逻辑的共享,因此可以直接代替pinia的能力

    2. 组件实例容器

    该容器与Vue 组件实例绑定。提供组件实例级别容器的好处就是,在这个容器中的所有 Class 实例都可以在组件实例范围之内共享数据和逻辑

    和 Mixins 的对比

    下面是基于 IOC 容器的源码案例,可以与 Mixins 做对照分析:

    1. 解决 mixins 的短板

    使用过 Vue2 的用户可能对mixins比较熟悉。IOC 容器可以解决 mixins 的所有短板:

    1. 不清晰的数据来源:在 IOC 中 Class 各司其职,可以很方便的对this溯源,定位其出处
    2. 命名空间冲突:在 IOC 中 Class 实例都有自己的变量名,自然没有命名冲突的隐患
    3. 隐式的跨 mixin 交流:通过 IOC 容器的托管,Class 实例可以非常方便的共享数据和逻辑,而且可以清晰定位其来源

    2. 吸收 mixins 的长处

    mixins虽然有许多短板,但是有一个长处,就是多个mixins之间共享数据和逻辑非常方便。组合式 API虽然也能实现数据和逻辑的共享,但是一旦调用链层级深了,使用起来就不太方便

    • 我们可以看一张示意图:

    image.png

    如图所示,一个 Vue 组件使用了两个 Composables ,然后这两个 Composables 又分别使用了两个 Composables 。那么,如果要在这 6 个 Composables 中共享状态和逻辑是非常不方便的,无法满足复杂业务的需求

    • 我们再来看 IOC 容器的示意图:

    image.png

    如图所示,一个 Vue 组件对应一个 IOC 容器,在 IOC 容器中注入了 6 个 Class 实例。这些 Class 实例由于都被 IOC 容器托管,所以可以相互引用,从而方便共享状态和逻辑

    额外好处

    基于 Vue3 强大而且灵活的响应式系统,IOC 容器在创建 Class 实例时自动包裹一层 reactive ,那么就可以收到如下好处:

    1. 不用 ref/reactive:有了 IOC 容器的加持,定义响应式状态不再需要ref/reactive
    2. 不用 ref.value:因为不用ref,自然也就不用再写大量的ref.value

    概念辨析

    有人说 Zova 中 Java 的味道很浓

    其实,Zova 与 Java 的代码风格有显著的不同,体现在以下两个方面:

    1. 更少的装饰器函数:Zova 采用依赖注入与依赖查找相结合的策略,优先使用依赖查找,从而大量减少装饰器函数的使用
    2. 更少的类型标注:Zova 优先使用依赖查找可以达到化类型于无形的开发体验,也就是不需要标注类型就可以享受到类型编程的诸多好处,从而让我们的代码始终保持简洁和优雅,进而显著提升开发效率,保证代码质量

    有人说前端的技术趋势是组合优于继承,所以引入 IOC 是不合时宜的

    其实,从本质上来看,IOC 容器的核心架构理念就是组合。通过 IOC 容器的托管,这些 Bean 实例可以更加自由灵活的组合,可以更加便利的共享状态和逻辑

    结语

    那么,如果搬砖累了,就玩一玩支持 ioc 容器的 vue3 框架吧,尝试一下全新的开发体验。

    Zova 源码已开源,欢迎围观: https://github.com/cabloy/zova

    Zova 可以和任何 UI 库搭配使用,这里有一个 daisyui 的效果演示: https://zova.js.org/zova-demo/

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5869 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:23 · PVG 10:23 · LAX 18:23 · JFK 21:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.