使用vue实现mvvm框架

Vue 实现 MVVM 框架的核心原理

Vue 的 MVVM（Model-View-ViewModel）实现主要依赖数据绑定和响应式系统。以下是关键实现步骤：

数据劫持（响应式核心）

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

function observe(data) {
  if (!data || typeof data !== 'object') return;
  Object.keys(data).forEach(key => {
    let value = data[key];
    const dep = new Dep();
    observe(value);
    Object.defineProperty(data, key, {
      get() {
        Dep.target && dep.addSub(Dep.target);
        return value;
      },
      set(newVal) {
        if (newVal === value) return;
        value = newVal;
        observe(newVal);
        dep.notify();
      }
    });
  });
}

依赖收集（发布-订阅模式）

实现 Dep（依赖收集器）和 Watcher（观察者）：

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

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this;
    const value = this.vm.data[this.exp];
    Dep.target = null;
    return value;
  }
  update() {
    const newVal = this.vm.data[this.exp];
    if (this.value !== newVal) {
      this.value = newVal;
      this.cb.call(this.vm, newVal);
    }
  }
}

模板编译

实现简易模板编译器：

function compile(node, vm) {
  if (node.nodeType === 1) {
    Array.from(node.attributes).forEach(attr => {
      if (attr.name.startsWith('v-')) {
        const exp = attr.value;
        new Watcher(vm, exp, value => {
          node.value = value;
        });
        node.addEventListener('input', e => {
          vm.data[exp] = e.target.value;
        });
      }
    });
  } else if (node.nodeType === 3) {
    const reg = /\{\{(.*)\}\}/;
    const match = node.nodeValue.match(reg);
    if (match) {
      const exp = match[1].trim();
      new Watcher(vm, exp, value => {
        node.nodeValue = value;
      });
    }
  }
  Array.from(node.childNodes).forEach(child => {
    compile(child, vm);
  });
}

整合实现

创建 Vue 类整合上述功能：

class Vue {
  constructor(options) {
    this.data = options.data;
    observe(this.data);
    compile(options.el, this);
  }
}

使用示例

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: document.getElementById('app'),
  data: {
    message: 'Hello MVVM!'
  }
});
</script>

现代改进方案

对于 Vue 3.0+ 版本，推荐使用 Proxy 替代 Object.defineProperty：

function reactive(data) {
  return new Proxy(data, {
    get(target, key) {
      const dep = getDep(target, key);
      dep.depend();
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      const result = Reflect.set(target, key, value);
      const dep = getDep(target, key);
      dep.notify();
      return result;
    }
  });
}

这种实现方式解决了数组监听和嵌套对象的问题，性能更优。