跳到主要内容

一套模型三种框架接法

这些 demo 的目标,是让你直接比较 Angular、React、Vue 在真实数据页面里的绑定方式和复杂度,而不是展示三套完全不同的数据方案。

3
个框架
1
套模型语义
100%
本地优先
同一套模型
三个 demo 共用相同的实体模型、查询结构和数据库能力。
差异集中在绑定层
你看到的主要差异在 UI 绑定层,而非业务语义被迫重写。
源码可直接对照
每个 demo 都能回到 apps/dev-rxdb-* 源码目录继续追踪实现,而非只展示界面。
复杂度接近真实项目
不是 TodoList,包含关系详情页、Branch Manager、File Manager 等真实业务场景,复杂度足以推演到自己的项目。
建议你观察的重点
查询结果如何自动更新
详情页和关系 tab 怎样组织复杂数据
同一模型在三套框架里的 API 差异有多小
Query Builder、Branch Manager、File Manager 这类页面是否足够真实
Angular
Angular
重业务管理后台
可运行
Signals 驱动的业务界面,适合复杂表单、关系数据和管理后台。
Signals 绑定
实体表单
关系详情页
Query Builder
源码目录:apps/dev-rxdb-angular
页面结构与源码可直接对照
进入演示
React
React
组件化数据应用
可运行
Hooks 风格接入,让查询与实体状态脱离组件局部状态的困扰。
Hooks 查询
虚拟列表
代码编辑器
Branch Manager
源码目录:apps/dev-rxdb-react
页面结构与源码可直接对照
进入演示
Vue
Vue
高迭代效率团队
可运行
Composables 配合响应式实体,适合快速构建数据密集型界面。
Composables
Reactive 数据流
AG Grid
File Manager
源码目录:apps/dev-rxdb-vue
页面结构与源码可直接对照
进入演示