前端面试之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

# 4.3 render 函数与 vdom

• vm._c 其实就相当于 snabbdom 中的 h 函数
• render<