vue对mvvm的实现
Vue 对 MVVM 的实现
Vue 是一个基于 MVVM（Model-View-ViewModel）模式的渐进式框架，通过数据绑定和响应式系统实现了视图与数据的分离。以下是 Vue 实现 MVVM 的核心机制：
数据绑定与响应式系统
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持，将数据对象（Model）转换为响应式数据。当数据变化时，自动触发视图（View）更新。
// Vue 2 响应式原理示例
const data = { message: 'Hello' };
Object.defineProperty(data, 'message', {
get() { return this._message; },
set(newVal) {
this._message = newVal;
console.log('视图更新'); // 模拟视图渲染
}
});虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，生成新的虚拟 DOM 树，通过 Diff 算法对比新旧树的差异，仅更新必要的 DOM 节点。
// 虚拟 DOM 简化示例
const vnode = {
tag: 'div',
props: { id: 'app' },
children: [{ tag: 'p', text: 'Hello Vue' }]
};模板编译
Vue 将模板（Template）编译为渲染函数（Render Function），生成虚拟 DOM。模板中的指令（如 v-model）会被解析为对应的数据绑定和事件监听逻辑。
<!-- 模板示例 -->
<div id="app">{{ message }}</div>
<!-- 编译后的渲染函数 -->
function render() {
return _c('div', { attrs: { id: 'app' } }, [_v(_s(message))]);
}双向数据绑定（v-model）
v-model 是语法糖，结合 :value 属性绑定和 @input 事件监听，实现表单元素与数据的双向绑定。
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">依赖收集与派发更新
Vue 通过 Watcher 和 Dep 类实现依赖收集。每个响应式属性关联一个 Dep 实例，当属性被访问时，当前 Watcher（如组件渲染函数）会被记录到 Dep 中。数据变化时，Dep 通知所有 Watcher 执行更新。
// 简化版依赖收集
class Dep {
constructor() { this.subs = []; }
depend() { this.subs.push(Dep.target); }
notify() { this.subs.forEach(watcher => watcher.update()); }
}总结
Vue 的 MVVM 实现通过响应式数据绑定、虚拟 DOM 和模板编译等技术，将开发者从手动操作 DOM 中解放出来，只需关注数据逻辑。ViewModel 层（Vue 实例）负责同步 Model 和 View，实现了高效且易维护的代码结构。
