JavaScript实现简易MVVM框架详解

function observe(data) {
  if (typeof data !== 'object' || data === null) return data;

  return new Proxy(data, {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      // 收集依赖（此处简化，实际可用Dep类管理）
      console.log(`获取 ${key}:`, value);
      return value;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        console.log(`更新 ${key} 从 ${oldValue} 到 ${value}`);
        dep.notify(); // 触发视图更新
      }
      return result;
    }
  });
}

class Compiler {
  constructor(el, vm) {
    this.el = document.querySelector(el);
    this.vm = vm;
    this.compile(this.el);
  }

  compile(node) {
    if (node.nodeType === 1) { // 元素节点
      Array.from(node.attributes).forEach(attr => {
        const attrName = attr.name;
        const exp = attr.value;
        if (attrName.startsWith('v-model')) {
          node.value = this.vm[exp];
          node.addEventListener('input', e => {
            this.vm[exp] = e.target.value;
          });
          // 添加依赖
          new Watcher(this.vm, exp, value => {
            node.value = value;
          });
        }
      });
    }

    if (node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)) { // 文本节点
      const exp = RegExp.$1.trim();
      node.textContent = node.textContent.replace(/\{\{(.*)\}\}/, this.vm[exp]);
      new Watcher(this.vm, exp, value => {
        node.textContent = value;
      });
    }

    if (node.childNodes && node.childNodes.length) {
      Array.from(node.childNodes).forEach(child => this.compile(child));
    }
  }
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(watcher) {
    this.subs.push(watcher);
  }

  notify() {
    this.subs.forEach(watcher => watcher.update());
  }
}

// 全局变量，用于临时存储当前正在求值的Watcher
let currentWatcher = null;

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get(); // 初始化时触发getter，完成依赖收集
  }

  get() {
    currentWatcher = this;
    const value = this.vm[this.exp]; // 触发getter
    currentWatcher = null;
    return value;
  }

  update() {
    const newValue = this.vm[this.exp];
    if (newValue !== this.value) {
      this.cb(newValue);
    }
  }
}

// 修改observe中的set逻辑以支持dep
const dep = new Dep(); // 简化处理，实际应为每个属性创建独立dep

class TinyMVVM {
  constructor(options) {
    this.$data = options.data();
    this.$el = options.el;

    // 响应式化数据
    this.$data = observe(this.$data);

    // 数据代理到实例上，方便this.xxx访问
    Object.keys(this.$data).forEach(key => {
      this.proxyData(key);
    });

    // 编译模板
    new Compiler(this.$el, this);
  }

  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal;
      }
    });
  }
}

<div id="app">
  &lt;input v-model=&quot;message&quot; /&gt;
  <p>{{ message }}</p>
</div>

<script>
  const vm = new TinyMVVM({
    el: '#app',
    data() {
      return {
        message: 'Hello MVVM!'
      };
    }
  });
</script>