MVVM与双向绑定实现原理详解

本文深入剖析了在原生HTML环境中如何用JavaScript手动实现MVVM模式与双向绑定的核心原理，揭示了所谓“HTML做MVVM”实则是通过精心构建ViewModel层，在普通对象（Model）与DOM元素（View）之间搭建动态同步通路的过程；重点对比了Vue2依赖的Object.defineProperty（受限于已存在属性、无法监听新增字段和数组索引操作）与Vue3采用的Proxy（全面拦截任意读写、支持动态属性但兼容性受限）两种响应式方案的本质差异，并详解了模板解析（如{{ }}插值）、v-model模拟（输入监听+数据回写+类型处理）及复杂场景下依赖追踪、嵌套响应、边界清理等真正考验工程鲁棒性的关键挑战——帮你穿透框架封装，直击前端响应式系统的底层逻辑。

原生 HTML 本身不支持 MVVM，所谓“HTML 做 MVVM”，本质是用 JavaScript 在浏览器中模拟 ViewModel 层，把 input、div 等标签当作 View，把普通对象当作 Model，再靠监听 + 拦截实现双向同步——不是加个属性就自动绑定，而是你得亲手搭起那条“数据 ↔ 视图”的通路。

为什么 Object.defineProperty 是 Vue2 的基础，但不能监听新增属性

它只能劫持对象**已存在**的属性的 get 和 set。一旦你在初始化后给 data 对象加新字段（比如 data.newField = 'x'），这个赋值不会触发视图更新，因为没被定义为响应式。

• 必须在创建 MVVM 实例前，把所有可能用到的字段都声明好，哪怕初始值是 undefined
• 数组索引直接赋值（arr[0] = 'a'）或 length 修改也不会触发，Vue2 内部重写了 push/pop 等 7 个方法来兜底
• 深层嵌套对象需递归遍历每一层，否则 obj.a.b.c 改了，obj.a 那层的 set 根本不执行

Proxy 怎么解决 defineProperty 的硬伤

Proxy 是对整个对象的代理，不关心字段是否存在，也不管是新增、删除还是数组索引访问——只要走的是这个代理对象，统统能捕获。

• set(target, key, value) 能拦截任意属性赋值，包括 obj.xxx = 1 和 obj['xxx'] = 1
• get(target, key) 可捕获读取，适合做依赖收集（比如模板里用了 {{ user.name }}，就在这里记下谁依赖了 user.name）
• 但 Proxy 无法被 IE 支持，且对 for...in、Object.keys() 等枚举操作需配合 ownKeys 和 getOwnPropertyDescriptor 才能完全代理

模板里的 {{ message }} 是怎么变成真实文本的

这不是浏览器内置功能，是你写的 Compile 类在解析 DOM 时，遍历所有文本节点，正则匹配 {{\s*([\s\S]+?)\s*}}，然后把里面的内容（如 message）当作路径去 Model 上取值，最后替换掉整个大括号片段。

• 遇到 {{ user.profile.name }} 这种嵌套路径，不能直接 obj['user.profile.name']，得用 obj.user?.profile?.name 或手写 getValue(obj, 'user.profile.name')
• 文本节点更新后，要缓存原始模板字符串，否则下次重新渲染会把刚插入的值又当模板再解析一遍
• 如果模板里有未定义字段（比如 {{ xxx }}），别让脚本报错中断，最好返回空字符串或 undefined

v-model 在原生 JS 中怎么模拟

它其实是两件事的组合：监听用户输入 + 把新值写回数据。缺一不可，否则就是单向了。

• 对 input、textarea 用 input 事件（不是 change，后者只在失焦时触发）
• 对 checkbox/radio 用 change 事件，并读取 e.target.checked 或 e.target.value
• 绑定时必须同时注册一个 Watcher：当数据变化时，反向设置 el.value = newValue；当用户输入时，调用 vm.data[key] = el.value
• 别忘了处理 el.value 和数据类型不一致的问题，比如数字输入框应转成 Number(el.value)

真正难的不是写通一条绑定链，而是当嵌套对象、数组、计算属性、依赖清理混在一起时，谁该在什么时候触发、谁该被取消订阅——这些边界情况，往往只在用户连续快速输入、切换 tab、销毁组件时才暴露出来。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《MVVM与双向绑定实现原理详解》文章吧，也可关注golang学习网公众号了解相关技术文章。