⚡ 30 秒速记

• Model 放数据，View 展示，ViewModel 协调
• 更新状态驱动界面，少手写节点同步
• 响应式读取建立依赖，写入通知相关工作
• 输入事件把用户操作转成状态变化
• 模式不等于某个框架或必须使用虚拟树

MVVM 是把数据、界面和两者之间的同步逻辑分开，让业务主要描述状态怎样变。 以响应式页面为例，渲染读取数据时建立依赖，数据更新后安排相关界面刷新；用户输入再通过事件或绑定写回状态。这样不用在每个操作里手动找节点、改文字。具体采用访问器、代理还是其他机制属于框架实现，不能把设计模式等同于某一种底层接口。

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

一、说一下使用 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 ？以及渲染过程

三、vue 中如何实现响应式

3.1 什么是响应式

• 修改 data 属性之后，vue 立刻监听到
• data 属性被代理到 vm 上

3.2 Object.defineProperty

3.3 模拟实现

四、vue 中如何解析模板

4.1 模板是什么

• 本质：字符串
• 有逻辑，如 v-if v-for 等
• 与 html 格式很像，但有很大区别
• 最终还要转换为 html 来显示

模板最终必须转换成 JS 代码，因为

• 有逻辑（v-if v-for），必须用 JS才能实现
• 转换为 html 渲染页面，必须用 JS 才能实现
• 因此，模板最重要转换成一个 JS 函数（render 函数）

4.2 render 函数

• 模板中所有信息都包含在了 render 函数中
• this 即vm
• price 即 this.price 即 vm.price，即 data 中的 price
• _c 即 this._c 即 vm._c