面試題之: 什麼是MVVM？

• 11月24 7:00複習
• 11月24 19:00複習
• 11月25 7:00複習
• 11月27 7:00複習
• 12月01 7:00複習
• 12月15 7:00複習
• 01月15 7:00複習

考察點:

如何理解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
}

注意 : 日常開發不要使用with函數

render

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

//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. 模板中的所有信息都包含在render的函數中
2. this就是vm

面試題5: vue的實現流程