Vue 2 入门：简介、MVVM 与双向绑定
一、Vue 2 简介
Vue 2 是一套用于构建用户界面的渐进式 JavaScript 框架，由尤雨溪及其团队开发，2016 年正式发布，是 Vue.js 的第二个主版本，在前端领域应用广泛。
核心特点
- 渐进式框架：可按需引入能力，不必一次性全盘接受。
- 数据驱动：以数据状态为中心驱动视图更新。
- 组件化开发：界面拆成可复用组件。
- 虚拟 DOM：用内存中的 VNode 描述 UI，配合 diff 降低直接操作真实 DOM 的成本。
- 选项式 API：通过
data、methods、computed等选项组织代码（Vue 3 在此基础上增加组合式 API）。
优势
简单易学，上手曲线平缓；生态与资料成熟。
二、MVVM 与 MVC
MVC（Model-View-Controller）
- Model：数据层，负责业务逻辑与数据操作。
- View：用户界面，负责展示。
- Controller：中介，处理用户输入，协调 Model 与 View。
- 特点：多为单向数据流（View → Controller → Model → View）。
MVVM（Model-View-ViewModel）
- Model：数据层，与 MVC 中类似。
- View：用户界面，侧重展示，业务逻辑更少落在视图里。
- ViewModel：视图模型，负责展示逻辑与状态，连接 View 与 Model。
- 特点：双向数据绑定（View ↔ ViewModel ↔ Model）。
对比
| 方面 | MVC | MVVM |
|---|---|---|
| 通信方向 | 单向为主 | 双向数据绑定 |
| 核心组件 | Controller | ViewModel |
| 视图职责 | 可能承担部分逻辑 | 更偏纯展示 |
| 耦合度 | 相对较高 | 相对较低 |
| 典型场景 | 传统 Web 后端框架（如 Spring MVC） | 现代前端框架（Vue、Angular 等） |
说明
- React 并不严格等于 MVVM：它更偏「单向数据流 + 组件」，通常不强调 ViewModel 这一层。
三、什么是双向绑定
Vue 基于 MVVM，其核心体验之一是双向绑定：数据变化自动更新视图，视图变化（如输入）自动写回数据，关键在于「自动」。
以表单输入框为例：输入框值变化 → 数据联动 → 数据在其他地方被改 → 输入框同步更新。本质是数据与视图联动。
四、Vue 2 双向绑定原理（合并阐述）
核心结论
Vue 2 使用 Object.defineProperty 做数据劫持，配合发布-订阅（Dep / Watcher）实现响应式；模板侧再通过 v-model 语法糖（:value + @input 等）完成「视图 → 数据」一侧。
1. 数据劫持
对 data 返回的对象做递归遍历，为属性定义 getter / setter：
- getter：读取时做依赖收集（哪些视图/ Watcher 依赖该字段）。
- setter：写入时通知更新，触发相关 Watcher 重渲染。
2. 依赖收集与派发
- 每个属性可对应 Dep，维护订阅了该属性的 Watcher 列表。
- 数据变更 → setter →
Dep.notify()→ Watcher 更新 → 重新执行渲染函数。
3. 简化流程
初始化：Watcher 读数据 → 触发 getter → Dep 收集该 Watcher。
修改数据 → 触发 setter → Dep 通知 Watcher → 视图更新。
4. 实现脉络
- Observer：遍历属性，
Object.defineProperty重写 get/set；getter 里收集依赖，setter 里Dep.notify()。 - Dep：订阅器，维护 subs（Watcher 列表）。
- Watcher：连接数据与视图；更新时执行补丁逻辑（生成 VNode、diff、patch）。
- Compile：解析模板指令，初始化视图并把节点与更新函数绑定。
5. v-model 与双向绑定
v-model是语法糖，不是「另一种绑定机制」：表单控件上等价于属性单向绑定 + 事件把视图值写回数据，最终仍落到响应式 setter 与重新渲染。- 示例等价写法：
html
<input :value="message" @input="message = $event.target.value" />五、局限性
- 新增 / 删除属性：无法自动监听，需
Vue.set/this.$set（或替换整个对象）。 - 数组下标与长度：直接
arr[i] = x未必触发更新；可变数组建议用变更方法或$set（Vue 对若干数组方法做了包裹）。
六、延伸阅读
- 响应式细节与代码级理解见 03-响应式原理·data·丢失响应式与 props。
- 列表渲染与
key、diff 见 05-虚拟 DOM 与 diff。