vue mvvm 实现

Vue MVVM 实现原理

Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。以下是其核心实现机制：

数据劫持（响应式核心）

Vue 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）对数据进行劫持，监听数据变化。当数据被访问或修改时，触发对应的 getter 和 setter。

// Vue 2.x 的响应式实现简化示例
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('访问数据');
      return val;
    },
    set(newVal) {
      console.log('更新数据');
      val = newVal;
      // 触发视图更新
    }
  });
}

依赖收集（Dep 和 Watcher）

Vue 通过 Dep（依赖管理器）和 Watcher（观察者）实现依赖收集和派发更新。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

class Watcher {
  update() {
    // 更新视图
  }
}

模板编译

Vue 将模板编译为渲染函数，过程中解析指令（如 v-model）和插值表达式，建立数据与视图的绑定关系。

// 简化的模板编译示例
function compile(template) {
  // 解析模板生成 AST
  // 将 AST 转换为渲染函数
  return function render() {
    // 返回虚拟 DOM
  };
}

虚拟 DOM 和 Diff 算法

Vue 通过虚拟 DOM 实现高效的视图更新，使用 Diff 算法比较新旧虚拟 DOM 的差异，最小化 DOM 操作。

// 简化的 Diff 示例
function patch(oldVnode, newVnode) {
  // 比较并更新 DOM
}

双向绑定实现（v-model）

v-model 是语法糖，本质上是 v-bind 和 v-on 的组合。

// v-model 的等价形式
<input v-model="message">
// 等价于
<input :value="message" @input="message = $event.target.value">

生命周期管理

Vue 组件生命周期钩子（如 created、mounted）在特定阶段被调用，允许开发者介入组件的创建、更新和销毁过程。

new Vue({
  created() {
    // 实例创建后调用
  },
  mounted() {
    // DOM 挂载后调用
  }
});

总结

Vue 的 MVVM 实现通过数据劫持、依赖收集、模板编译和虚拟 DOM 等技术，实现了数据与视图的自动同步。ViewModel 作为中间层，负责处理 Model 和 View 之间的交互，开发者只需关注数据逻辑，无需手动操作 DOM。