MVVM

MVVM

1. 说一下使用jQuery和使用框架的区别?

• jQuery实现todo-list √
• vue实现todo-list √
• jQuery和框架的区别

---

2. 如何理解MVVM?

• MVC（Model View Controller）
• MV VM
• 关于ViewModel
  ViewModel 连接桥

答：

1. Model - 模型、数据
2. View - 视图、模板
3. ViewModel - 连接Model和View

• View通过事件绑定影响Model

• Model通过数据绑定影响View

  
  
  

  mvvm.png

---

3. 如何实现MVVM?
三大要素
1. 响应式：vue如何监听到data的每个属性变化？
2. 模板引擎：vue的模板如何被解析，指令如何处理？
3. 渲染：vue的模板如何被渲染成html？以及渲染过程？

---

4. 说一下jQuery和vue有什么区别?

• 数据和视图的分离（开放封闭原则）
• 以数据驱动视图

答：
⒈jQ 数据和视图未分离，直接操作DOM
⒉vue数据和视图各自独立，用数据驱动视图，只关心数据层面变化

---

5. vue如何实现响应式?

• 什么是响应式

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

答：

• 关键函数 Object.defineProperty
• 将data代理在vm上

---

6. vue中如何解析模板?

• 模板是什么？

1. 本质是字符串
2. 有逻辑，如：v-if v-for等
3. 与html格式很像，但有很大的区别（html是静态，模板是动态）
4. 最终还是要转化为html来显示的

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

• render函数 - with用法

  • v-if v-for必须用js实现

  • 模板到render函数可以用工具生成

  • v-model是怎么实现的?

  • v-on:click 是怎么实现的?

  • v-for是怎么实现的?

  • v-if是怎么实现的?

• render函数与vdom

vdom的如何应用，核心API是什么?
（vdom 用js对象模拟dom结构）

• 介绍snabbdom
  • h函数 创建虚拟节点
  • patch函数
    • 将虚拟节点渲染到真实dom上
    • 新vnode和旧vnode diff对比，拿新的改变渲染到真实dom上
• 重做demo
• 核心API

---

7. vue的整个实现流程

1. 解析模板成render函数
2. 响应式开始监听
3. 首次渲染，显示页面，且绑定依赖（get set）
4. data属性变化，触发rerender