💚 Vue

一句话定性

Vue 是一场精妙的”集大成”与”做减法”:它取 AngularJS 的数据绑定 + React 的组件化,扔掉两者的心智负担,做成一条任何人都能从 <script> 标签起步的平缓坡道。它证明了:框架的胜利,不只靠技术先进,更靠让对的人能轻松上手。

一、它是什么 & 出现的时代

2014 年,前 Google 工程师**尤雨溪(Evan You)**发布 Vue。它生于 2013-2018 SPA时代:React 已展露锋芒,但门槛不低;AngularJS 概念繁多。Vue 主打两个字:渐进式(progressive)。

"渐进式"是什么意思

你可以只用一点点:一个 <script> 标签引入,给现有页面加点响应式交互,像 jQuery 一样轻。也可以用全套:SFC 单文件组件 + Vue Router + 状态管理 + 构建工具,做大型 SPA。采用成本随需求平滑增长,没有”一上来就上全家桶”的门槛。

核心特性:响应式系统(数据变 UI 自动变)、SFC 单文件组件(.vue 文件,template/script/style 三段合一)、模板语法(v-if/v-for/v-model,熟悉的 HTML 形态)。

二、为什么会出现(解决上一代什么痛点)

两难:React 太"重",AngularJS 太"杂"

尤雨溪在 Google 用 AngularJS,觉得它太重、概念太多($scope/$digest/directive 配置)。而 React 虽然范式优雅,但 JSX + 工具链 + 函数式思维对很多人门槛偏高。

他的想法是:只取最好的部分。

取 AngularJS 的数据绑定 + 模板语法(直观、熟悉 HTML 的人零成本)。

取 React 的组件化 + 虚拟 DOM(可组合、性能可控)。

但要更轻、更渐进、更易学。

详见 2013-2018 SPA时代与深度专题为什么Vue在中国崛起。

三、核心创新 & 为什么流行(踩中什么时代红利)

自动响应式 + 模板:写 v-model 即双向绑定的便利,享受 React 单向流的可控(Vue 默认单向,v-model 是语法糖)——鱼和熊掌兼得。
SFC 单文件组件:.vue 把模板、逻辑、样式(支持 scoped)封装在一个文件里,关注点”内聚”而非”分离”,体验极佳。
渐进式采用:从 CDN 引入到全套工程,坡道平滑。
文档极好 + 中文友好:官方中文文档质量一流。

为什么在中国格外流行

Vue 的崛起踩中了中国的独特红利:① 大量从 jQuery/PHP/后端转前端的开发者需要平缓坡道,模板语法比 JSX 亲切;② 作者是中国人,中文社区/文档/生态极其完善;③ 国内中小企业和外包项目多,Vue 的”开箱即用 + 上手快”完美契合。在中国,Vue 是事实上的第一框架。详细论证见为什么Vue在中国崛起。

四、带来的新问题 / 副作用

易用的代价 & 演进的阵痛

2.x 响应式的先天缺陷:Vue 2 用 Object.defineProperty 劫持属性的 getter/setter 实现响应式,但它无法检测对象属性的新增/删除和数组索引的直接赋值——于是有了 Vue.set 这种打补丁的 API,是公认的坑。

Options API 在大组件里逻辑分散:同一个功能的 data/methods/computed/watch 被拆到不同选项里,组件一大就难以维护、难以复用逻辑。

“魔法”过多:模板里的隐式 this、自动 unwrap ref 等便利,有时让行为不够透明。

生态曾经分裂:Vue 2 → Vue 3 升级,加上 Vuex → Pinia 的迁移,造成过一段生态割裂期。

五、为什么会衰落 / 现状(仍在用则讲演化)

Vue 没有衰落,而是用 3.x 完成了一次脱胎换骨,稳居全球第二、中国第一:

Vue 3 的两大进化

响应式用 Proxy 重写(2.x Object.defineProperty → 3.x Proxy):Proxy 能拦截整个对象的所有操作,根治了 2.x”检测不到属性新增/数组索引”的硬伤,且性能更好、初始化更快。这是底层引擎的彻底重建。

Composition API:用 setup + ref/reactive/computed/watch 组织逻辑,按”功能”而非”选项”聚合代码,逻辑可通过 composable 函数复用——这是对 React Hooks 思想的呼应与回答,解决了 Options API 逻辑分散的痛点。(<script setup> 进一步简化了写法。)

状态管理也从 Vuex 演进到 Pinia(更轻、对 TS 友好、无 mutation 样板),详见 Vuex-Pinia。配合 Vite(同样出自尤雨溪)成为现代 Vue 的标配工具链。

六、对后续技术的影响(因果链)

AngularJS 太重 + React 门槛高
        │
        ↓
Vue(2014):取两家之长 + 渐进式 + 模板语法 ──► 易上手之王
        │
        ├─► 模板 + 中文生态 ──► 在中国崛起为第一(见 [[为什么Vue在中国崛起]])
        │
        ├─► 2.x Object.defineProperty 响应式 ──► 检测不到属性增删的硬伤
        │       └─► 3.x 用 Proxy 重写 ──► 根治
        │
        ├─► Options API 逻辑分散 ──► Composition API(呼应 React Hooks)
        │
        ├─► Vuex 样板多 ──► Pinia(见 [[Vuex-Pinia]])
        │
        └─► 尤雨溪做 Vue 的构建痛点 ──► 催生 Vite ──► 取代 Webpack 的开发体验
                │
                ↓
        证明了:框架成功 = 技术 × 易用性 × 社区,缺一不可

历史地位

Vue 是 SPA 时代的”平衡大师”。它没有发明全新范式,而是把已有的好东西(数据绑定、组件化、响应式)以最低门槛重新组合,让前端的红利惠及了最广泛的开发者。它的故事证明:降低门槛本身就是一种重大创新。

前端技术演化史

探索

Vue

💚 Vue

一、它是什么 & 出现的时代

二、为什么会出现(解决上一代什么痛点)

三、核心创新 & 为什么流行(踩中什么时代红利)

四、带来的新问题 / 副作用

五、为什么会衰落 / 现状(仍在用则讲演化)

六、对后续技术的影响(因果链)

关系图谱

目录

反向链接