vue如何实现mvvm
Vue 实现 MVVM 的核心机制
Vue 的 MVVM（Model-View-ViewModel）实现依赖于数据绑定和响应式系统，通过以下机制完成：
数据劫持（响应式核心）
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）对数据对象进行劫持。当数据变化时，能自动触发视图更新。
// Vue 2 的响应式实现片段
function defineReactive(obj, key) {
let value = obj[key]
Object.defineProperty(obj, key, {
get() {
return value
},
set(newVal) {
if (newVal !== value) {
value = newVal
dep.notify() // 通知依赖更新
}
}
})
}依赖收集（发布-订阅模式）
每个响应式属性拥有一个 Dep 实例，用于存储所有依赖（Watcher）。当数据变化时，Dep 会通知所有 Watcher 更新。
class Dep {
constructor() {
this.subs = []
}
addSub(sub) {
this.subs.push(sub)
}
notify() {
this.subs.forEach(sub => sub.update())
}
}虚拟 DOM 与差异更新
Vue 将模板编译为虚拟 DOM，通过 diff 算法比对变化，最小化真实 DOM 操作。
// 简化的 patch 过程
function patch(oldVnode, vnode) {
if (sameVnode(oldVnode, vnode)) {
patchVnode(oldVnode, vnode)
} else {
const parent = oldVnode.parentNode
parent.insertBefore(createElm(vnode), oldVnode)
parent.removeChild(oldVnode)
}
}模板编译
Vue 模板通过编译器转换为渲染函数，建立数据与视图的绑定关系。
// 编译结果示例
function render() {
with(this) {
return _c('div', { attrs: { "id": "app" } }, [_v(_s(message))])
}
}实现流程分解
-
初始化阶段
- 对 data 进行响应式处理
- 编译模板生成渲染函数
- 创建 Watcher 绑定更新函数
-
依赖收集阶段
- 执行渲染函数触发 getter
- 通过 Dep 收集当前 Watcher 作为依赖
-
更新阶段
- 数据变化触发 setter
- Dep 通知所有 Watcher 执行更新
- 重新计算虚拟 DOM 并应用差异
关键设计模式
- 观察者模式：通过 Watcher 观察数据变化
- 中介者模式：Dep 作为中间件协调数据与视图
- 命令模式：将 DOM 操作封装为指令系统
这种设计使得开发者只需关注数据状态，视图的同步更新由框架自动完成，实现了 MVVM 的核心目标。
