面试题之: 什么是MVVM？_mvvm面试题

• 2月26日添加到anki

考察点:

如何理解MVVM?
如何实现MVVM?
你是否读过VUE源码?

面试题1: 说下使用jquery和Vue的区别？

答：

1. 数据和视图的分离
   1. dom 和 js没有分离，真正的内容会混合在js中由js创建
   2. 不符合开放封闭原则。对扩展开放，对修改封闭
2. 以数据驱动视图
   1. jquery直接修改视图
   2. vue只需要修改数据，框架自动修改视图，Dom操作被封装

面试题2: 说一下对MVVM的理解

mvc: 数据层，视图层，控制层

mvvm：数据层，视图层，vm层

vm是数据层和视图层的桥梁，数据与视图分离

面试题3: vue如何实现响应式

defineProperty

面试题4: vue如何解析模板

1. 什么是模板？
2. render函数？
3. render函数与vdom？

模板

• 本质上说就是一段字符串
• 有逻辑。v-for，v-if……
• 和html很像，但有很大区别，html是静态的
• 最终转化成html显示
• 模板最终要转换成js代码
• 有逻辑必须需要js才能实现（js图灵完备）
• js才能实现html的渲染
• 重要的js函数render

with

with(obj) {
	alert(name)     //obj.name
	alert(age)     //obj.age
}
1
2
3
4

注意 : 日常开发不要使用with函数

render

<div id="app">
<p>{{price}}</p>
</div>
1
2
3

//render
with(this) {
	return _c{
		//vm._c
		'div',
		{
			attrs: {"id": "app"}
		},
		[
			_c['p',[_v(_s(price))]]
			//vm.price
			//vm._v  创建文本节点
			//vm._c  创建dom标签
			//vm._s  toString
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1. 模板中的所有信息都包含在render的函数中
2. this就是vm
   todo的render图片
   

v-model双向绑定是怎么实现的？

答: 当vue的模板文件被解析成js的时候，它的本质是有一个get，一个set的。比如说input和list的双向绑定，当on input事件触发的时候，就会改变vm.title. 而title改变的时候，获取到title赋值给input的value

v-for怎么实现的？

答: _l()函数核心就是一个for循环。变成一个数组，做ul的子元素。

vm._c 和render 返回什么？

vm._c 实际上就类似snabbdom的h函数。虚拟dom

render 和patch

总结：

1. 模板就是字符串。有逻辑和变量
2. 模板必须转换成js代码
3. render函数是什么样子？复习
4. render函数返回的事vnode
5. updateComponent

面试题5: vue的实现流程

三要素: 双向绑定、模板解析、渲染

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

1. with的引用
2. 模板中所有的信息都要被render函数包含
3. 模板中用到的data属性都变成js变量
4. v-modle、v-for……变成js
5. 返回vnode

第二步： 响应式开始监听

1. 通过object.defineProperty监听到data中属性的get和set方法
2. 将data中的属性代理带vm上

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

1. 首次渲染使用uodateComponent()函数
2. vm.patch（$el, vnode）
3. patch将vnode转换成dom，完成首次渲染

第四步：data变化，触发rerender

1. 命中set的监听
2. set 中执行updateComponent
3. uodate重新执行render()
4. vdom和preVdom比较
5. 渲染到dom中