HTML本身不支持MVVM，需用JavaScript模拟ViewModel层，通过Object.defineProperty（Vue2）或Proxy（Vue3）实现响应式，但前者无法监听新增属性和数组索引操作，后者可全面捕获。
原生 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、销毁组件时才暴露出来。
