为什么选择 Vue 3？

专栏目录

《Vue 3 基础》

文章目录

• 专栏目录
• 前言
• 一、Vue 是什么？
• • Vue 是什么？
  • • Vue 的三个特点
    • • 1、组件化架构
      • 2、响应式编程
      • 3、学习成本低
    • Vue 生态
  • 适用场景
  • 横向比较
• 二、为什么选择 Vue3？
• • Vue 2.x 和 Vue 3.x 的主要区别
  • 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： 谷歌开源，适合大型项目，学习曲线陡峭。

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

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

• 前端 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 的学习路线。