在 Vue 的官方文档中,有这么的一句话:
Vue 是一套用于构建用户界面的渐进式框架。
那什么是渐进式框架呢?
在说明这个问题之前,先了解一下前端框架。
前端框架
框架的存在是为了帮助我们应对复杂度。
但框架自身在存在复杂度, 这里就抽象出一个问题,就是要做的应用的复杂度与所使用的框架的复杂度的对比。 进一步说,是所要解决的问题的内在复杂度,与所使用的工具的复杂度进行对比。
Pick the right tool for the job.
三大框架的设计哲学
2018 年前端领域最主流的三个框架:Angular、React、Vue,它们各有不同的设计主张。
Angular:全家桶式框架
Angular 是一个完整的平台。使用 Angular 意味着接受整套方案:TypeScript、依赖注入、RxJS、模块系统、CLI 工具链,全部由框架规定。
Angular 项目 = 模板 + 组件 + 服务 + 模块 + 路由 + HTTP + 表单 + ...
优点是团队协作一致性高,大型项目的架构约束明确。代价是学习曲线陡峭,对小项目来说过重。
React:UI 即函数
React 的核心主张是 UI = f(state)。它只负责视图层,其他事情交给社区。这带来了函数式编程的理念:纯函数、不可变数据、单向数据流。
React 项目 = React(视图) + 自选路由 + 自选状态管理 + 自选构建工具
优点是灵活度极高,思维模型清晰。代价是需要做大量选择,初学者容易迷失在生态中。
Vue:渐进式框架
Vue 的核心主张是”最少侵入”。你可以只用它的模板引擎来渲染视图,也可以逐步引入完整的工具链。框架不强制你一开始就接受所有概念。
Vue 项目 = 从一个 <script> 标签开始,按需扩展
渐进式的具体体现
所谓”渐进式”,意思是 Vue 的技术栈可以按层次逐步引入:
第 1 层:声明式渲染
└── 只用 Vue 核心,模板 + 数据绑定
第 2 层:组件系统
└── 拆分页面为可复用组件
第 3 层:客户端路由
└── 引入 vue-router,实现 SPA
第 4 层:状态管理
└── 引入 vuex,集中管理共享状态
第 5 层:构建工具
└── 引入 webpack/vue-cli,单文件组件、热更新
每一层都是可选的。一个简单的页面,用第 1 层就够了:
<!-- 最简用法:一个 script 标签引入 Vue -->
<div id="app">{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: { message: '只需要一个 script 标签' }
});
</script>
随着项目变复杂,再逐层加入路由、状态管理、构建工具。这和 Angular 要求一上来就学完整套体系形成对比。
渐进式框架的核心观点
在知乎徐飞的回答中,强调:“渐进式代表的是主张最少”。
主张是框架对使用者的要求,它会影响在业务开发中的使用方式。 比如 Angular 是强主张的,使用时需要考虑是否和其他东西集成, 而 React 主张的是”函数式编程”的理念,它是一种软性侵入; 在 React 中,需要知道什么是副作用,什么是纯函数,如何隔离副作用。 徐飞说,不建议在中后台系统中使用 React,因为大多数人不知道如何把业务映射到函数式的理念中去, 还有,JS本身有太多特性和纯函数式的主张不一致;
Vue是渐进式的,没有强主张,作者推荐使用 Vue 的原因是: 要替换原系统中的那部分,直接使用 Vue 中的那部分功能就好了。
这段话的关键在于”主张最少”四个字。Vue 不要求你理解函数式编程,不要求你学 TypeScript,不要求你掌握依赖注入。你有多少能力,就用多少功能。
如何根据项目复杂度选框架
不同规模的项目,适合不同”重量”的工具:
| 项目类型 | 复杂度 | 建议方案 |
|---|---|---|
| 活动页、简单交互 | 低 | jQuery 或 Vue 核心 |
| 中小型 SPA | 中 | Vue + vue-router |
| 中大型应用 | 中高 | Vue 全家桶 / React + 生态 |
| 企业级复杂系统 | 高 | Angular / React + 严格架构 |
选择框架时要考虑的因素:
- 团队规模:人多时,Angular 的强约束减少沟通成本
- 项目周期:短期项目选上手快的,长期维护选生态成熟的
- 现有技术栈:已有 jQuery 项目要改造,Vue 的渐进式接入最平滑
- 团队熟悉度:框架的好坏不如团队对它的掌握程度重要
总结
“渐进式”不是一个技术特性,而是一种设计理念。它的本质是降低框架对使用者的要求,让复杂度的引入由开发者自己决定。项目简单时用简单的部分,项目变复杂时再逐步引入更多功能。
框架是工具,不是信仰。选对了工具,复杂度才是可控的。