vue怎样实现mvvm

Vue 实现 MVVM 的模式

Vue 通过数据绑定和响应式系统实现 MVVM（Model-View-ViewModel）架构。以下是核心实现机制：

数据绑定与响应式系统

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问。当数据变化时，触发依赖收集的 Watcher 更新视图。

// Vue 2 响应式简化示例
function defineReactive(obj, key) {
  let value = obj[key];
  const dep = new Dep(); // 依赖收集器

  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集当前依赖
      return value;
    },
    set(newVal) {
      if (newVal !== value) {
        value = newVal;
        dep.notify(); // 通知更新
      }
    }
  });
}

虚拟 DOM 与 Diff 算法

Vue 将模板编译为虚拟 DOM，通过 Diff 算法比对变化后生成最小化 DOM 操作，高效更新视图。

// 虚拟 DOM 结构示例
{
  tag: 'div',
  attrs: { id: 'app' },
  children: [
    { tag: 'span', text: 'Hello Vue' }
  ]
}

模板编译

Vue 模板通过编译器转换为渲染函数。例如以下模板：

<div>{{ message }}</div>

会被编译为类似以下的渲染函数：

function render() {
  return _c('div', [_v(_s(message))]);
}

依赖收集与派发更新

• 依赖收集：在渲染过程中，触发数据的 getter 将 Watcher 添加到依赖列表。
• 派发更新：数据变化时触发 setter，通知所有 Watcher 执行更新。

MVVM 各层对应关系

• Model：Vue 的 data 对象，代表业务数据。
• View：模板或渲染函数生成的 DOM 结构。
• ViewModel：Vue 实例，负责同步 Model 和 View，处理事件绑定等逻辑。

双向绑定实现

通过 v-model 指令实现表单元素与数据的双向绑定：

<input v-model="message">

等价于：

<input 
  :value="message" 
  @input="message = $event.target.value">