面試中React與Vue的比對

1.virtual dom

• 用JS模擬DOM結構，DOM變化的對比，放在JS層作，以提升重繪性能
• DOM操做昂貴，JS運行效率高，要減小DOM操做
• 使用：snabbdom的使用
• 核心API：h函數 h(‘標籤名’,{屬性},[子元素]) 或者h(‘標籤名’,{屬性},’’)
• patch(container,vnode) 或者 path(vnode,newvnode)

2.MVVM中jQuery與Vue區別

視圖與數據的分離，解耦（開放封閉原則）
以數據驅動視圖，只關心數據，DOM操做被封裝

3.對MVVM的理解

• MVC：model view controller

(數據模型->視圖->控制器->數據模型)

或者 (控制器->數據模型->視圖)

MVVM：model view viewmodel（視圖與數據之間的橋：事件綁定，數據綁定）

4.Vue三要素

• 響應式：修改data屬性後，Vue馬上監聽到
• 響應式核心：用Object.defineProperty,將data的屬性代理到vm上

• 模板引擎：

  • 本質：字符串；有邏輯，v-if，v-for等，能夠嵌入JS變量，必須用JS才能實現，轉換成html渲染頁面，模板最終轉化成JS函數（render函數：with方法）
• 渲染

5.Vue的流程

• 解析模板成render函數：

  • with的使用，模板中全部信息都被render函數包含
  • 模板中用到的data中的屬性，都變成JS變量，模板中的v-model v-for v-on都變成JS邏輯，render函數返回vnode

• 響應式開始監聽：

  • Object.defineProperty將data的屬性代理到VM上，使用get監聽是爲了防止重複渲染
• 首次渲染，顯示頁面，且綁定依賴
• data屬性變化，觸發render

6.react

• 組件化：組件封裝，組件複用
• 組件封裝：封裝視圖、數據、變化邏輯（數據驅動視圖變化）
• 組件複用：props傳遞，複用
• JSX本質：JSX是語法糖，須要被解析成JS才能運行，JSX是獨立的標準，可被其餘項目使用
• JSX就是模板，最終要渲染成html
• 須要vdom的緣由：JSX要渲染成html，數據驅動視圖

7.setState過程

setState的異步：

（緣由）：可能一次執行屢次setState，沒法規定、限制用戶如何使用setState，不必每次setState都從新渲染，考慮性能，即使每次從新渲染，用戶看不到中間渲染的效果，因此只要最後的效果就可

8.Vue與react

• 二者本質的區別：模板和組件化的區別

  • Vue本質是MVVM框架，由MVC發展而來；
  • React是前端組件化框架，由後端組件化發展而來；
• Vue使用模板
• React使用JSX
• React自己就是組件化
• Vue是在MVVM上擴展的

• 共同點：

  • 都支持組件化，都是數據驅動視圖