vue怎样实现mvvm
Vue 实现 MVVM 的原理
Vue 的 MVVM（Model-View-ViewModel）模式通过数据绑定和响应式系统实现视图与数据的自动同步。以下是 Vue 实现 MVVM 的核心机制：
数据劫持（响应式系统）
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据的读写操作。当数据变化时，触发依赖的视图更新。
// Vue 2 的数据劫持示例
const data = { name: 'Vue' };
Object.defineProperty(data, 'name', {
get() {
console.log('读取数据');
return value;
},
set(newVal) {
console.log('更新数据');
value = newVal;
updateView(); // 触发视图更新
}
});依赖收集
通过 Dep（依赖管理器）和 Watcher（观察者）实现依赖跟踪。每个响应式属性有一个 Dep 实例，当属性被访问时，当前 Watcher 会被记录到 Dep 中。
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}模板编译
Vue 将模板编译为渲染函数，解析指令（如 v-model）和插值表达式（{{}}），建立数据与 DOM 的绑定关系。
// 示例：v-model 双向绑定实现
<input v-model="message">
// 编译后等效于
<input :value="message" @input="message = $event.target.value">虚拟 DOM
通过虚拟 DOM 比对（Diff 算法）最小化真实 DOM 操作。数据变化时生成新的虚拟 DOM，与旧节点对比后局部更新视图。
// 简化的虚拟 DOM 结构
const vnode = {
tag: 'div',
props: { id: 'app' },
children: [
{ tag: 'span', text: this.message }
]
};MVVM 各层职责
- Model：普通 JavaScript 对象，如 Vue 的
data。 - View：模板或渲染函数生成的 DOM。
- ViewModel：Vue 实例，负责数据绑定、事件监听等桥梁作用。
通过以上机制，Vue 实现了数据变化自动驱动视图更新（数据绑定），以及视图交互反向修改数据（双向绑定）的 MVVM 模式。
