首页 > 文章 > 前端

手写MVVM框架入门教程

时间：2025-12-08 11:12:24 387浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《手写简单MVVM框架教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

答案：该MVVM框架通过Object.defineProperty实现数据劫持，结合Dep类进行依赖收集与通知，compile函数解析模板指令并绑定更新，最终在MVVM类中整合数据监听与视图渲染，实现数据变化自动驱动视图更新。

手写一个简单的MVVM框架_javascript技巧

实现一个简单的MVVM框架，核心是数据劫持结合发布-订阅模式，通过Object.defineProperty监听数据变化，并在视图中响应更新。下面是一个极简但完整的MVVM示例，帮助理解其工作原理。

1. 数据劫持：监听数据变化

使用Object.defineProperty对数据对象的属性进行 getter/setter 重写，实现数据劫持。

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

  Object.keys(data).forEach(key => {
    let value = data[key];
    const dep = []; // 依赖收集器

    observe(value); // 递归监听嵌套对象

    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        if (Dep.target) {
          dep.push(Dep.target); // 收集依赖
        }
        return value;
      },
      set(newVal) {
        if (newVal === value) return;
        value = newVal;
        observe(newVal); // 新值也需监听
        dep.forEach(fn => fn()); // 通知更新
      }
    });
  });
}

2. 依赖管理：Dep类

Dep（Dependency）用于管理 watcher，实现依赖收集和派发更新。

const Dep = {
  target: null
};

3. 编译模板：解析指令和插值

扫描DOM，解析v-model、{{ }}等语法，绑定数据更新视图。

function compile(el, vm) {
  const fragment = document.createDocumentFragment();
  let child;

  while (child = el.firstChild) {
    fragment.appendChild(child);
  }

  function replace(node) {
    const reg = /\{\{(.*)\}\}/;
    if (node.nodeType === 3 && reg.test(node.nodeValue)) {
      const key = RegExp.$1.trim();
      Dep.target = () => {
        node.nodeValue = vm[key];
      };
      node.nodeValue = vm[key]; // 初始化赋值
      Dep.target = null;
    }

    if (node.nodeType === 1) {
      const attrs = node.attributes;
      Array.from(attrs).forEach(attr => {
        const name = attr.name;
        const exp = attr.value;
        if (name === 'v-model') {
          node.value = vm[exp];
          node.addEventListener('input', e => {
            vm[exp] = e.target.value;
          });

          Dep.target = () => {
            node.value = vm[exp];
          };
          Dep.target = null;
        }
      });
    }

    if (node.childNodes && node.childNodes.length) {
      compile(node, vm);
    }
  }

  fragment.childNodes.forEach(replace);
  el.appendChild(fragment);
}

4. MVVM主类

整合数据监听、模板编译和初始化逻辑。

function MVVM(options) {
  this.$data = options.data;
  const id = options.el;
  const el = document.querySelector(id);

  observe(this.$data);
  compile(el, this);

  // 代理this上的属性访问
  Object.keys(this.$data).forEach(key => {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal;
      }
    });
  });
}

使用方式：

new MVVM({
  el: '#app',
  data: {
    message: 'Hello MVVM'
  }
});

HTML结构：

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

当输入框内容变化时，message被更新，setter触发，通知所有依赖重新渲染，视图自动刷新。

总结：这个简易MVVM包含三个核心部分——数据劫持（observe）、依赖收集（Dep）、视图更新（compile）。虽然缺少批量更新、组件系统等高级功能，但已体现MVVM本质：数据驱动视图。基本上就这些。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。