为什么选择 Vue 3？

专栏目录

《Vue 3 基础》

---

---

前言

随着互联网行业的不断发展，前端开发已经渗透到应用开发的方方面面，选择一款趁手的开发框架，无疑会大大地提升效率，增加编码的愉悦度。

本文主要介绍一下 Vue 是什么，看完之后，希望你也认为值得入坑。

---

一、Vue 是什么？

要简单明了地介绍一门技术，无外乎就是要了解这三个问题：

• 是什么：在整个技术体系中，处于什么位置？
• 适用场景：它能帮我们解决什么问题？
• 横向比较：和其他类似方案横向比较，优势和不足分别是什么？社区/生态是否成熟？

最后想要得到的答案：你值得花时间去学它吗？

Vue 是什么？

Vue 是一个渐进式 JavaScript 框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。——摘自 Vue 官方网站

官方这段介绍，重点提到了是一个渐进式 JavaScript 框架，包含了两个关键词。

其一是 JavaScript 框架，这个不用赘述，其二是 渐进式，就是说你可以根据现有项目的状态，决定多大程度使用 Vue 来完成部分（某一个页面的一部分、一个页面、其中几个页面都可以）或者全部功能，不必一次把整个应用推翻重构。

这段介绍，并没有包括 Vue 的全部特点，介绍中还有这么一句：

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。——摘自 Vue 简介

下面再聊聊 Vue 的特点

Vue 的三个特点

1、组件化架构

Vue 的核心思想是组件化编程。

组件是应用程序中的一个可重复使用的部分，它可以封装代码、样式和行为，并将其作为一个整体进行管理。

这里的整体，是说 Vue 把组件的逻辑放到一个 .vue 文件中，称为单文件组件（Single File Component，简称 SFC，这一点和 React 不一样）

每个 Vue 应用程序都由一个或多个组件组成。这些组件可以嵌套，形成嵌套层次结构，并且可以通过父子组件之间的数据传递来实现通信。这种方式使得 Vue 应用程序易于维护和拓展，方便代码复用，使得重复代码量大大减少

利用 Vue Devtools 可以很方便的看到整个应用的组件架构，从而更易于理解业务逻辑并进行调试。

2、响应式编程

Vue 的另一个关键特性是响应式编程。

Vue 可以跟踪应用程序中的数据变化，并自动更新用户界面。这种机制使得开发人员只需要关注数据本身，而不必手动维护用户界面的状态。

在 Vue 中，您可以使用响应式数据对象来存储应用程序中的数据。当数据发生变化时，Vue 会自动重新渲染组件，以反映新数据的状态。

组件的 JS 逻辑，核心就变成了控制这些响应式数据对象的变化，编码的心智负担大大降低。

3、学习成本低

Vue 基于标准 HTML、CSS 和 JavaScript 构建，如果你有这三门基础，看看文档一两天就能上手开发了。
Vue 由尤雨溪（Evan You）开发，首次发布于 2014 年，因此中文文档也非常完善。

Vue 生态

一个 JavaScript 框架的生态是否强大，决定了它的前景。

Vue 的生态系统非常强大，有许多第三方库和插件，可用于解决各种问题和扩展 Vue 的功能，这部分可以参见官方的工具链介绍。

举一些例子：

• 项目脚手架：Vite 是一个轻量级的、速度极快的构建工具，可以帮助您轻松完成搭建项目、开发调试到打包构建的整套流程。
• IDE 支持：推荐使用的 IDE 是 VS Code，配合 Vue - Official 扩展 (之前叫做 Volar)。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。
• 官方库支持：vue-router 可以帮助您管理应用程序的路由；Pinia 可以帮助您管理 Vue 应用程序中的状态
• 调试工具：Vue Devtools 可以帮助你了解 Vue 运行时的状态，方便调试代码。
• 大量成熟的第三方组件库：Element UI、ElementPlus、Ant Design Vue

适用场景

1. 开发 Web 页：无论适合 PC 浏览器访问的网页（后面统称PC页面），还是手机里访问的页面（后面统称H5页面），Vue 都是非常适合的。
2. 开发小程序：uni-app 默认使用 Vue 作为开发语言，可以一套代码发布成各种小程序、手机 App、H5页面
3. 开发手机 App：Weex 默认使用 Vue 语法编写，并最终打包发布为原生的 App。

横向比较

开发 Web 页面，目前常用的前端方案有React、Vue、Angular。

1. React：Facebook 开源，当之无愧的王者；
2. Vue：尤雨溪开源，在国内很受欢迎，甚至超过 React；
3. Angular： 谷歌开源，适合大型项目，学习曲线陡峭。

看一个框架的情况，还是要用数据对话，下面是近期采集的数据

对比维度	React	Vue	Angular
首次发布时间	2013	2014	2010
最新版本	v18.3.1	v3.4.27	v.18.0.1
npmjs 周下载量	2301万	479万	332万
npmmirror近一周单日下载峰值	7万	9万	0.4万
GitHub stars	224k	207k	94.9k

可以参阅一些其他人的对比文章

• 前端 Vue、React、Angular三种语言的不同、优缺点以及如果合理的选择

jQuery 当下已经使用的很少，但因此就不再推荐。

那么，对于初学者，应该如何选择？说说我个人的看法：

1. React 和 Vue 最好都掌握，在国内无论一线互联网大厂，还是小公司，这两个框架应用范围都很广，最好是根据你自己当前工作团队或者手里项目的技术栈需要，选择其一进行优先学习，有空的时候再学另一个。其实只要有组件式开发的理念，熟悉一下很快就能上手，迁移的成本没那么高。在国外 React 用户还是远远大于 Vue 的。

有人统计过 2023 年国内镜像 npmmirror 的下载量，得出如下结论：2023年国内 react 比 vue 多 300 万下载量，2023年国外 npm 上 react 10 亿, vue 2 亿 , 相差 5 倍 —— 摘自：今年各个前端框架和组件库 npm 与 npmmirror 的总下载量

2. Angular在国内市场使用比 React 和 Vue 都少，一般外企使用会比较多，如果你没打算去外企或者海外远程工作，Angular 不应该是首选的学习目标。

二、为什么选择 Vue3？

在业内当下使用比较高频的有 Vue 2.x 和 Vue 3.x 两个大版本，其中 Vue 2.x 官方已经宣布自2023年12月31日起不再维护。

鉴于仍然存在很多使用 Vue 2.x 开发的应用还在维护，如果感兴趣，可以去官网（https://v2.cn.vuejs.org/）学习 Vue 2.x。
有条件的建议升级到 Vue 3.x，毕竟这是大势所趋。

Vue 2.x 和 Vue 3.x 的主要区别

1. 更容易维护：最大的亮点 组合式 API，并且很好的支持了 TypeScript
2. 更快的速度：重写了 diff 算法，并优化了模板编译；支持更高效的组件初始化
3. 更小的体积：移除一些冷门功能，支持 tree-shaking 和 按需引入
4. 更优的数据响应式：监听方式改为 Proxy

Vue 3 升级指南

主要学习一下组合式 API的写法，用习惯了以后你会发现比 Vue 2 的写法更简洁。
不过你如果还想继续保持 Vue 2 的选项式 API 写法，Vue 3 也是支持的。

建议阅读官方文档 Vue 3 迁移指南

总结

那么 Vue 3 值得前端初学者选择吗？当然值得，且尽量首选。欢迎大家发表自己的看法一起探讨。

下一篇将介绍一下 Vue 的学习路线。