实现轻量级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 节点和更新逻辑。
狼群淘客 免费开源淘宝客程序
下载
狼群淘客系统基于canphp框架进行开发，MVC结构、数据库碎片式缓存机制，使网站支持更大的负载量，结合淘宝开放平台API实现的一个淘宝客购物导航系统采用php+mysql实现，任何人都可以免费下载使用 。狼群淘客的任何代码都是不加密的，你不用担心会有任何写死的PID，不用担心你的劳动成果被窃取。
定义一个简单的更新函数：
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 }}
