Vue系列——第 1 篇：初识 Vue.js——前端世界的渐进式框架

本篇定位这是 Vue 系列教程的開篇之作。我们将从零开始理解 Vue.js 是什么、为什么它如此受欢迎、它的设计哲学是什么以及它在前端技术版图中处于怎样的位置。读完本篇你将建立起对 Vue 的完整认知框架。一、什么是 Vue.js1.1 官方定义Vue读音/vjuː/类似于英文单词view是一套用于构建用户界面的渐进式框架。拆解这个定义有三个关键词「构建用户界面」——Vue 的核心职责是基于数据渲染出用户可以看到的界面。换句话说Vue 帮你把「数据」变成「页面」。「渐进式」——这是 Vue 最核心的设计理念。所谓渐进式是指你可以循序渐进地学习不必把 Vue 中的所有 API 都学完才能开发可以学一点、用一点。你可以在一个静态页面中引入一个 CDN 脚本做点交互也可以用它搭建一个完整的单页应用SPA再逐步引入路由、状态管理、构建工具——整个过程平滑递进Vue 不会对现有项目造成强制入侵。「框架」——Vue 不仅仅是一个工具库它定义了一套完整的开发规范和最佳实践配合官方提供的路由Vue Router、状态管理Pinia、构建工具Vite等生态工具可以支撑从简单到复杂的各类项目。1.2 Vue.js 是谁创造的Vue.js 由中国籍开发者尤雨溪Evan You于2014 年 2 月正式发布。在创建 Vue 之前尤雨溪曾在 Google 工作研究过 AngularJS。他当时希望打造一个更轻量、更易用的前端框架填补 AngularJS 笨重、React 学习曲线陡峭的市场空白。Vue 是目前全球范围内最受欢迎的前端三大框架之一也是少有的从中国本土成长起来、拥有全球影响力的开源前端开发工具。全球用户超 150 万npm 月下载量超 1000 万次。包括阿里巴巴、腾讯、百度、字节跳动等国内头部互联网企业以及 NASA、苹果、GitLab、Adobe 等国际知名机构都在生产环境中使用 Vue。Vue 采用MIT 开源协议由社区驱动维护。二、为什么要学习 Vue2.1 前端开发的发展简史在理解 Vue 的价值之前我们先快速回顾一下前端开发的发展历程阶段技术特点痛点早期HTML CSS 原生 JavaScript无框架、无模块化代码难以复用和维护Web 2.0Ajax 动态交互、jQuery 简化 DOM 操作代码逐渐复杂仍缺乏结构化的组织方式现代React、Vue、Angular 等框架 Vite/Webpack 工具链大幅提升开发效率但学习成本也随之提高Vue 正是在这样的背景下应运而生——它让前端开发从「操作 DOM」变成了「声明式地描述 UI」开发者只需要关心数据是什么样的Vue 会帮你把数据高效地渲染到页面上。2.2 Vue 的核心优势Vue 之所以能够快速崛起并保持强劲的生命力主要得益于以下几个核心优势① 轻量级与高性能Vue 的核心库非常轻量基线大小约 16KB最小化 brotli 压缩。同时Vue 采用虚拟 DOM技术能够智能地计算出最少需要重新渲染多少组件把 DOM 操作次数降到最少。在 js-framework-benchmark 基准测试中Vue 的性能表现优于 React 和 Angular。② 渐进式设计灵活接入你可以在一个已有的老项目中仅用一行script标签引入 Vue为某个页面模块添加交互能力也可以从零开始用 Vue 搭建一个完整的企业级应用。这种「自底向上逐层应用」的设计让 Vue 的采用成本极低。③ 极易上手文档友好Vue 的学习曲线是三大框架中最平缓的。它的语法直观、文档清晰完整初学者可以在很短的时间内写出可用的 Vue 应用。④ 响应式数据绑定Vue 拥有强大的响应式系统数据变化会自动驱动视图更新开发者不再需要手动操作 DOM。双向数据绑定v-model更是简化了表单交互的开发。⑤ 组件化开发Vue 采用单文件组件Single File ComponentSFC的格式.vue文件将模板HTML、逻辑JavaScript/TypeScript和样式CSS集中在同一个文件中极大地提升了代码的可维护性和复用性。⑥ 完善的生态体系Vue 拥有官方维护的全家桶工具路由Vue Router、状态管理PiniaVuex 的继任者、构建工具Vite等形成了完整的技术闭环。三、Vue vs React vs Angular三大框架横向对比为了帮助你更清晰地理解 Vue 的定位我们将它与另外两个主流框架——React 和 Angular——进行对比。对比维度VueReactAngular开发者尤雨溪个人开源MetaFacebookGoogle定位渐进式框架视图层解决方案完整的前端框架语言JavaScript / TypeScriptJavaScript / TypeScriptTypeScript强制学习曲线较低语法直观文档丰富中等需掌握 JSX、Hooks较高概念复杂模块、服务、依赖注入等数据流双向绑定v-model单向数据流双向绑定组件格式单文件组件.vueJSXJavaScript 中写 HTMLTypeScript 类 模板性能优秀虚拟 DOM优秀虚拟 DOM良好但大型应用可能面临性能问题灵活性介于 Angular 和 React 之间非常灵活相对固定遵循严格规范适用场景中小型到大型项目快速开发各类规模需要高灵活性的项目大型企业级应用需要严格结构的项目生态成熟度逐渐壮大在中国尤其活跃非常丰富全球最大完整但社区活跃度不如前两者简单总结Vue 吸收了 Angular 的声明式模板语法和 React 的虚拟 DOM 高性能机制在「易用性」和「能力」之间找到了一个极佳的平衡点。它不像 Angular 那样庞大沉重也不像 React 那样需要开发者自己在大量第三方库中做选择。对于绝大多数前端项目来说Vue 都是一个非常务实的选择。四、Vue 的发展历程了解 Vue 的发展历程有助于你理解它为什么是今天这个样子以及各个版本之间的差异。4.1 萌芽期从 Seed 到 Vue2013-20142013 年 12 月尤雨溪发布了第一个以「Vue.js」命名的版本0.6.0在此之前的版本都叫Seed。2014 年 2 月Vue 在 HackerNews 上首次公开发布公开后的第一周就获得了400 GitHub Star。同年 10 月第一次实现了 Vue 单文件组件当时叫 vueify使用 Browserify 打包。这个阶段的 Vue 还只是一个库而非框架——它像 jQuery 一样可以直接通过script标签引入使用基于 ES5 的getter/setter实现响应式系统。4.2 框架化Vue 1.020152015 年 10 月 26 日Vue 1.0正式发布代号Evangelion新世纪福音战士。这是 Vue 历史上的第一个里程碑。同年Vue Router2015 年 8 月、Vuex2015 年 11 月、vue-cli2015 年 12 月相继发布标志着 Vue 从一个视图层库发展为一个完整的渐进式框架。也是从这个版本开始大量前端开发者成为 Vue 的用户。Vue 1.0 确定了今天仍然在使用的核心语法v-bind、v-on及其简写:和以及v-for取代了早期的v-repeat。4.3 爆发Vue 2.020162016 年 9 月Vue 2.0发布代号Ghost in the Shell攻壳机动队。Vue 2.0 是一次重大升级引入了虚拟 DOM和更高效的渲染机制性能得到大幅提升支持服务端渲染SSR改进了组件系统使组件化开发更加成熟Vue 2.0 发布后Vue 的生态和用户基数开始爆发式增长npm 下载量节节攀升。重要提示Vue 2 已于2023 年 12 月 31 日正式停止维护EOL。虽然 Vue 2.7 在 2022 年 7 月作为 Vue 2 的最后一个次要版本发布但官方已不再推送新特性仅在此前提供关键 bug 修复和安全更新。所有新项目都应直接使用 Vue 3。4.4 革新Vue 3.020202020 年 9 月Vue 3.0正式发布。这是 Vue 历史上最彻底的一次重构。Vue 3 的核心改进可以概括为五个方向① 速度更快重写了虚拟 DOM 实现编译模板优化静态提升、Patch Flags组件初始化更高效update 性能提升 1.3~2 倍SSR 速度提升 2~3 倍② 体积更小借助Tree Shaking技术可以按需打包只包含用到的功能基线大小仅约 16KB最小化 brotli 压缩③ 更易维护引入了组合式 APIComposition API解决了 Vue 2 中逻辑复用困难的问题代码组织更加清晰按功能聚合而非按选项类型data、methods、computed 等分散④ 拥抱 TypeScriptVue 3 使用 TypeScript 重写提供了完整的类型支持开发体验大幅提升IDE 智能提示更加完善⑤ 更接近原生引入了createRendererAPI支持自定义渲染器新特性Teleport传送门、Suspense异步依赖处理、Fragments多根节点模板等配套工具链也完成了代际切换从 Vue CLI基于 Webpack到Vite基于原生 ESM 的极速构建工具。4.5 版本选择建议版本状态建议Vue 2已停止维护2023.12.31 EOL仅维护存量项目Vue 3当前最新主版本新项目首选本系列教程将全面基于 Vue 3 进行讲解。五、Vue 的应用场景Vue 的渐进式设计让它能够覆盖从轻到重的各类场景① 静态页面的交互增强在已有的 HTML 页面中通过 CDN 引入 Vue为某个表单、列表或弹窗添加动态交互能力。② 中小型单页应用SPA使用 Vue Vue Router Pinia快速搭建功能完整的单页应用。③ 大型企业级应用配合 Vite、TypeScript、组件库如 Element Plus、Ant Design Vue等构建复杂的企业级管理系统。④ 服务端渲染SSR与静态站点生成SSG使用 Nuxt.js基于 Vue 的全栈框架实现 SEO 友好的服务端渲染或静态站点生成。⑤ 移动端与跨平台通过 uni-app 或 NativeScript-Vue使用 Vue 开发跨平台移动应用。⑥ 桌面端应用使用 Electron Vue构建跨平台桌面应用程序。六、本篇小结恭喜你完成了 Vue 系列教程的第一篇在本篇中我们学习了知识点核心内容Vue 是什么一套构建用户界面的渐进式框架读音 /vjuː/谁创造了 Vue中国开发者尤雨溪2014 年 2 月正式发布为什么要学 Vue轻量高性能、渐进式设计、极易上手、响应式绑定、组件化开发、生态完善三大框架对比Vue 在易用性和能力之间取得了最佳平衡发展历程萌芽期Seed→ Vue 1.0框架化→ Vue 2.0虚拟 DOM→Vue 3.0全面革新版本选择Vue 2 已停止维护新项目请用 Vue 3应用场景从页面交互增强到大型企业应用从 Web 到移动端和桌面端七、思考与练习为了巩固本篇所学请尝试完成以下任务自我检索用自己的话解释什么是「渐进式框架」并举一个生活中的类比。调研对比访问 Vue 官网cn.vuejs.org和 React 官网对比两者首页的欢迎语和设计理念说说你的感受。版本确认打开 Vue 官网查看当前最新版本号是多少提示可以在官网首页找到。思考题如果你是一个技术团队的负责人要为一个中型管理后台选择前端框架你会选择 Vue 还是 React为什么下篇预告第 2 篇我们将真正动手——搭建 Vue 3 开发环境创建并运行你的第一个 Vue 应用。你将学习到Node.js 与包管理器的安装VSCode 必备插件配置Volar 等使用create-vue脚手架创建项目Vue 项目的目录结构解析运行你的第一个Hello World我们下一篇见