实现轻量级MVVM需核心四步：1. 用Proxy劫持数据实现响应式；2. 遍历DOM解析{{}}和v-model指令；3. 编译时收集依赖，将更新函数存入watchers；4. 数据变化时触发回调，通知所有依赖更新视图。
实现一个轻量级的MVVM框架，核心在于数据绑定、响应式更新和视图与模型的分离。不需要依赖庞大的库，只需抓住几个关键机制：数据劫持、模板解析、依赖收集和视图更新。下面一步步说明如何从零构建一个极简但可用的 MVVM 框架。
数据劫持与响应式系统
要让数据变化能自动触发视图更新，必须监听数据的变化。在现代 JavaScript 中，可以使用 Proxy 或 Object.defineProperty 来实现属性的 getter 和 setter 劫持。
这里以 Proxy 为例，因为它更简洁且支持数组和动态属性：
const observe = (data, callback) => { return new Proxy(data, { get(target, key, receiver) { return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { const oldValue = target[key]; const result = Reflect.set(target, key, value, receiver); if (oldValue !== value) { callback(key, value); // 通知变化 } return result; } });};
这个函数将传入的对象包装成响应式对象，每次修改属性时都会调用回调函数。
模板解析与指令识别
MVVM 的核心是把数据渲染到 DOM。我们需要解析模板中的绑定语法，比如 {{ message }} 或自定义指令如 v-model。
遍历 DOM 节点，查找文本节点中的插值表达式或元素上的指令：
const compile = (el, data, updateView) => { const childNodes = el.childNodes; childNodes.forEach(node => { if (node.nodeType === 3) { // 文本节点 const text = node.textContent; const reg = /{{(.+?)}}/g; if (reg.test(text)) { const key = RegExp.$1.trim(); updateView(node, key); // 初次更新 // 数据变化时重新执行 updateView } } else if (node.nodeType === 1) { // 元素节点 const attrs = node.attributes; Array.from(attrs).forEach(attr => { if (attr.name === ‘v-model’) { const key = attr.value; node.value = data[key]; node.addEventListener(‘input’, () => { data[key] = node.value; }); updateView(node, key, true); // 绑定 input 更新 } }); } if (node.childNodes.length) { compile(node, data, updateView); // 递归子节点 } });};
依赖收集与视图更新
当数据变化时，需要知道哪些视图依赖了该数据。可以在初始化编译时记录每个绑定对应的 DOM 节点和更新逻辑。
定义一个简单的更新函数：
const updateView = (node, key, isInput = false) => { if (isInput) { node.addEventListener(‘input’, e => { vm.$data[key] = e.target.value; }); } // 初始化和后续更新都通过此函数 const updateFn = () => { if (isInput) { node.value = vm.$data[key]; } else { node.textContent = vm.$data[key]; } }; // 立即执行一次 updateFn(); // 将更新函数注册为该 key 的订阅者（简化版） vm.$watchers[key].push(updateFn);};
在数据劫持的回调中通知所有订阅者更新：
this.$watchers = {};Object.keys(this.$data).forEach(key => { this.$watchers[key] = [];});// 在 observe 的 callback 中：callback = (key, value) => { this.$watchers[key].forEach(fn => fn());};
整合成 MVVM 类
把以上逻辑封装成一个类：
class TinyMVVM { constructor(options) { this.$el = options.el; this.$data = options.data(); this.$watchers = {}; Object.keys(this.$data).forEach(key => { this.$watchers[key] = []; }); // 响应式化数据 this.$data = observe(this.$data, (key, value) => { this.$watchers[key].forEach(fn => fn()); }); // 编译模板 const el = document.querySelector(this.$el); compile(el, this.$data, (node, key, isInput) => { const updateFn = () => { if (isInput) { node.value = this.$data[key]; } else { node.textContent = this.$data[key]; } }; updateFn(); this.$watchers[key].push(updateFn); }); }}
使用方式：
new TinyMVVM({ el: ‘#app’, data() { return { message: ‘Hello Tiny MVVM!’ }; }});
HTML 示例：
{{ message }}
基本上就这些。一个轻量级 MVVM 的核心就是数据劫持 + 模板解析 + 视图更新。虽然没有 Vue 那样完整的虚拟 DOM 和编译优化，但理解这些原理有助于掌握响应式框架的本质。不复杂但容易忽略细节，比如递归编译、事件绑定和依赖管理。
以上就是如何实现一个轻量级的MVVM框架的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534336.html
微信扫一扫 
支付宝扫一扫 
