当前位置：首页 > JavaScript

js mvvm 实现

2026-04-04 04:33:46JavaScript

MVVM 模式简介

MVVM（Model-View-ViewModel）是一种前端架构模式，核心思想是通过数据绑定实现视图（View）与数据模型（Model）的自动同步。ViewModel 作为中间层，负责处理业务逻辑和数据转换。

实现 MVVM 的关键技术

数据劫持（响应式核心）

通过 Object.defineProperty 或 Proxy 监听数据变化：

// 使用 Proxy 实现数据劫持
function observe(data) {
  return new Proxy(data, {
    get(target, key) {
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      updateView(); // 触发视图更新
      return true;
    }
  });
}

模板编译

解析 DOM 模板中的指令（如 v-model）并建立绑定：

function compile(el, vm) {
  el.querySelectorAll('[v-model]').forEach(node => {
    const key = node.getAttribute('v-model');
    node.value = vm.data[key];
    node.addEventListener('input', (e) => {
      vm.data[key] = e.target.value;
    });
  });
}

依赖收集

实现 Watcher 类跟踪依赖关系：

js mvvm 实现

class Watcher {
  constructor(vm, key, updateFn) {
    this.vm = vm;
    this.key = key;
    this.updateFn = updateFn;
    Dep.target = this;
    this.vm[this.key]; // 触发getter收集依赖
    Dep.target = null;
  }
  update() {
    this.updateFn.call(this.vm, this.vm[this.key]);
  }
}

完整实现示例

class MVVM {
  constructor(options) {
    this.$el = document.querySelector(options.el);
    this._data = options.data;
    this.data = observe(this._data);
    this.compile(this.$el);
  }

  compile(el) {
    el.querySelectorAll('[v-model]').forEach(node => {
      const key = node.getAttribute('v-model');
      node.value = this.data[key];
      new Watcher(this, key, value => {
        node.value = value;
      });
      node.addEventListener('input', e => {
        this.data[key] = e.target.value;
      });
    });
  }
}