Vue.js 简介

在动手装环境之前,我们先认识一下 Vue.js 到底是什么、为什么值得学、能用它做什么。理解了背景,学习的时候会更有的放矢。

Vue 是什么?

Vue.js(简称 Vue,发音 /vjuː/,类似 "view")是华裔工程师尤雨溪(Evan You)在 2014 年 2 月正式发布的一款用于构建用户界面的渐进式前端框架。它的核心思想非常简单:你把数据声明成"响应式"的,然后写好模板,之后修改数据,视图就会自动更新——你再也不用手动去操作 DOM。

与 React、Angular 并称"前端三大框架"。相比 React 的"函数式"哲学,Vue 更接近传统 Web 的模板写法,HTML/CSS/JS 三件套被收进一个 .vue 文件里;相比 Angular 的"全家桶"重量,Vue 体积极小、上手平缓。这是它在国内特别流行的根本原因。

诞生背景:一个人启发的项目

2013 年,尤雨溪在 Google 创意实验室工作,当时用 Angular 1 写了大量项目。他发现 Angular 太重、设计耦合严重,而自己真正需要的只是一套"数据驱动视图"的轻量方案。于是他在 2013 年 7 月开始利用业余时间做了一个实验:把 Angular 的数据绑定能力抽出来,搭配一套干净的模板语法——这就是 Vue 的雏形。

2014 年 2 月,他正式把 Vue 开源到 GitHub。出乎所有人意料,这个"一人项目"迅速蹿红,star 数几个月就破了万。如今 Vue 的 GitHub star 已超过 20 万,与 React 同属第一梯队,而核心团队也从最初一人扩展到数十位全球贡献者。Vue 的标志性配色是绿色(#42b883),被社区亲切地称为"小绿"。

"渐进式框架"是什么意思

"渐进式"是 Vue 最重要的定位,意思是:你不必一上来就学一整套复杂的体系,可以按需逐步引入能力。具体说:

• 最轻量:只引用一个 JS 文件,用 createApp 给一块 HTML 加上数据绑定,就像当年用 jQuery 一样简单。
• 进一步:用单文件组件(.vue 文件)拆分页面,引入构建工具(Vite)。
• 再进一步:加 Vue Router 做多页面、加 Pinia 做全局状态。
• 最完整:SSR(服务端渲染)、SSG(静态生成)、TypeScript 全链路——撑起大型企业应用。

对比 Angular 那种"一上来就给你定死一套全家桶"的做法,Vue 的曲线平缓得多。这是它对新手友好的核心原因。

Vue 2 与 Vue 3 的关系

2020 年 9 月,Vue 3.0 正式发布,这是一次大版本升级,内核用 TypeScript 完全重写。但 Vue 团队做了大量兼容工作,所以 Vue 2 项目可以平稳迁移。两者的主要区别:

• 响应式实现:Vue 2 用 Object.defineProperty,Vue 3 改用 Proxy,能监测到更多变化(如数组下标修改、新增属性)。
• API 风格:Vue 2 默认 Options API(data / methods),Vue 3 同时支持 Options API 与全新的 Composition API,逻辑组织更灵活。
• 性能:Vue 3 的打包体积更小、渲染更快、TypeScript 支持一流。
• 新组件:Vue 3 引入了 Teleport(传送门)、Suspense(异步加载)、Fragment(多根节点)等。

2022 年 12 月 31 日,Vue 2 已正式停止维护(EOL)。今天的新项目一律用 Vue 3,本系列也全部基于 Vue 3 + <script setup> 语法。

第一个 Vue 程序

说了这么多,先看一眼代码。Vue 最"古老"的用法是直接挂载到一个 DOM 元素上(基于 Options API):

<div id="app">
  {{ message }}
</div>

<script type="module">
import { createApp } from "vue";
createApp({
  data() {
    return { message: "Hello, Vue!" };
  },
}).mount("#app");
</script>
// 页面显示:Hello, Vue!

这是 Vue 2 时代最常见的写法。createApp 创建应用实例,data() 返回响应式数据,mount 把它挂到页面上。模板里的双花括号会输出 message 的值。

但今天的 Vue 3 推荐用单文件组件(SFC),长这样:

<!-- 一个 .vue 文件就是一个组件,三块结构清晰 -->
<template>
  <button @click="count++">点击 {{ count }} 次</button>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<style scoped>
button { color: #42b883; }
</style>

三块结构一目了然:模板管外观、脚本管逻辑、样式管美化。<script setup> 是 Vue 3 的推荐写法,里面声明的变量函数,模板里能直接用,无需 return。后续章节我们会一步步拆解每个部分。

Vue 都用在哪?典型应用场景

Vue 适合任何中后台、内容站、移动端 H5、桌面端(Electron)等场景。下面这些知名产品都基于 Vue 构建:

• 国内大厂后台:阿里(Element Plus)、蚂蚁(Ant Design Vue)、字节(Arco Design Vue)、腾讯(TDesign)——国内的组件库几乎全是 Vue 优先。
• 开源项目:GitLab(部分)、Vercel 控制台、Netlify 后台、Adobe Photoshop Web 版的部分界面。
• 内容/教育:Behance、Flipboard、小米官网、网易严选。
• 工具链:Vitepress(本站类似的文档站)、Nuxt.js(Vue 版的 SSR 框架)。
• 桌面/移动:用 Electron + Vue 写桌面应用(如 Lark、飞书部分界面);用 uni-app 写跨端小程序。

Vue vs 其他框架

• vs React:Vue 内置模板编译、上手更直观;React 用 JSX,灵活度高但自由过强,团队风格易发散。React 全球份额更大、海外岗位更多;Vue 在国内生态最完整。
• vs Angular:Angular 是"全家桶",自带 DI、路由、表单、HTTP——适合超大型企业项目,但学习曲线陡峭;Vue 模块化、按需引入,小到博客大到 ERP 都能驾驭。
• vs 原生 JS / jQuery:原生 JS 处理复杂状态会越写越乱(数据散落各处、手动改 DOM);Vue 把"数据 → 视图"自动化,代码量减少一半以上。
• vs Svelte / Solid:这两者是无虚拟 DOM 的"编译时框架",性能上限更高、体积更小;但生态远不如 Vue/React 成熟,新手优先选 Vue 不会错。

该不该学 Vue?

如果你的方向是前端开发、全栈、小程序、桌面应用,Vue 几乎是国内必修课。学完本系列,你将能独立用 Vue 写一个完整的中后台管理系统、做出多页面的个人博客、看懂 Element Plus 等组件库的源码。下一篇我们装环境,让代码真正跑起来。

← 返回 Vue 教程目录

下一篇 Vue 环境搭建 →