⚡ 30 秒速记

• 核心判断：响应式系统由依赖收集、变更触发和调度刷新组成，关键不在“监听数据”，而在精确关联状态与副作用
• 原理主线：围绕 「一、说一下使用 jquery 和使用框架」、「二、说一下对 MVVM 的理解」、「三、vue 中如何实现响应式」 建立输入、状态变化与输出之间的因果关系
• 文章范围：浅出地分析了前端开发中MVVM模式的原理，比较了jQuery与现代前端框架的区别，详细讲解了MVC与MVVM的结构、核心概念及其在前端开发中的应用，帮助读者理解数据驱动视图和响应式开发的优势。
• 边界与代价：Vue 2 的 defineProperty 与 Vue 3 的 Proxy 在新增属性、数组和集合类型上边界不同
• 工程落地：排查视图不更新或重复更新时，应沿读取是否被追踪、写入是否触发、任务是否被去重三段定位

MVVM 通过 ViewModel 连接数据和视图，让开发者更新状态而不是手动操作 DOM。 模板会先被编译成 render 函数，执行后生成 vnode；首次渲染读取响应式属性时完成依赖收集。属性被修改后，响应式的 set 触发重新渲染，再由 patch 对比新旧 vnode 并更新页面。监听 get 的意义是只关联真正被视图使用的数据，避免无关状态变化也触发重复渲染。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

一、说一下使用 jquery 和使用框架的区别

1.1 jQuery 实现 todo-list

1.2 vue 实现 todo-list

1.3 jQuery 和框架的区别

• 数据和视图的分离，解耦（开放封闭原则）
• 以数据驱动视图，只关心数据变化，DOM 操作被封装

二、说一下对 MVVM 的理解

2.1 MVC

• M - Model 数据
• V - View 视图、界面
• C - Controller 控制器、逻辑处理

2.2 MVVM

• Model - 模型、数据
• View - 视图、模板（视图和模型是分离的）
• ViewModel - 连接 Model 和 View

2.3 关于 ViewModel

• MVVM 不算是一种创新
• 但其中的 ViewModel 确实一种创新
• 真正结合前端场景应用的创建

2.4 MVVM 框架的三大要素

• 响应式：vue如何监听到 data 的每个属性变化？
• 模板引擎：vue 的模板如何被解析，指令如何处理？
• 渲染：vue 的模板如何被渲染成 html ？以及渲染过程