前端面试之MVVM浅析|原理篇

这篇文章不要按 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 ？以及渲染过程

# 三、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

# 4.3 render 函数与 vdom

• vm._c 其实就相当于 snabbdom中的 h 函数
• render 函数执行之后，返回的是 vnode

• updateComponent中实现了 vdom 的 patch
• 页面首次渲染执行 updateComponent
• data 中每次修改属性，执行updateComponent

# 五、vue 的整个实现流程

• 第一步：解析模板成 render 函数
• 第二步：响应式开始监听
• 第三步：首次渲染，显示页面，且绑定依赖
• 第四步：data 属性变化，触发 rerender

# 5.1 第一步：解析模板成 render 函数

• 模板中的所有信息都被 render函数包含
• 模板中用到的 data 中的属性，都变成了 JS 变量
• 模板中的v-model v-for v-on 都变成了 JS 逻辑
• render 函数返回 vnode

# 5.2 第二步：响应式开始监听

• Object.defineProperty
• 将 data 的属性代理到 vm上

# 5.3 第三步：首次渲染，显示页面，且绑定依赖

• 初次渲染，执行 updateComponent，执行 vm._render()
• 执行 render 函数，会访问到 vm.list vm.title
• 会被响应式的 get 方法监听到
• 执行 updateComponent ，会走到 vdom 的 patch 方法
• patch 将 vnode渲染成 DOM ，初次渲染完成

为何要监听 get ，直接监听 set 不行吗？

• data 中有很多属性，有些被用到，有些可能不被用到
• 被用到的会走到 get ，不被用到的不会走到 get
• 未走到 get 中的属性，set的时候我们也无需关心
• 避免不必要的重复渲染

# 5.4 第四步：data 属性变化

• 修改属性，被响应式的 set 监听到
• set中执行 updateComponent
• updateComponent 重新执行 vm._render()
• 生成的 vnode 和 prevVnode ，通过 patch进行对比
• 渲染到 html 中