中高級前端面試題（二）框架篇

接上篇中高級前端面試題（一）基礎篇

vue 雙向綁定實現：

vueObserver 數據監聽器，把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象全部的屬性，並使用Object.defineProperty()方法把這些屬性所有轉成setter、getter方法。當data中的某個屬性被訪問時，則會調用getter方法，當data中的屬性被改變時，則會調用setter方法。

react----redux

基本思想是整個應用的 state 保持在一個單一的 store 中。 store 就是一個簡單的 javascript 對象， 而改變應用 state 的惟一方式是在應用中觸發 actions，而後爲這些 actions 編寫 reducers 來修改 state。 整個 state 轉化是在 reducers 中完成，而且不該該有任何反作用。

在 Redux 中，何爲 store

Store 是一個 javascript 對象，它保存了整個應用的 state。與此同時，Store 也承擔如下職責：

• 容許經過 getState() 訪問 state
• 運行經過 dispatch(action) 改變 state
• 經過 subscribe(listener) 註冊 listeners
• 經過 subscribe(listener) 返回的函數處理 listeners 的註銷

何爲 action

Actions 是一個純 javascript 對象，它們必須有一個 type 屬性代表正在執行的 action 的類型。實質上，action 是將數據從應用程序發送到 store 的有效載荷。

何爲 reducer

一個 reducer 是一個純函數，該函數以先前的 state 和一個 action 做爲參數，並返回下一個 state。

Redux Thunk 的做用 Redux thunk 是一個容許你編寫返回一個函數而不是一個 action 的 actions creators 的中間件。若是知足某個條件，thunk 則能夠用來延遲 action 的派發(dispatch)，這能夠處理異步 action 的派發(dispatch)。 何爲純函數(pure function) 一個純函數是一個不依賴於且不改變其做用域以外的變量狀態的函數，這也意味着一個純函數對於一樣的參數老是返回一樣的結果。

vuex 是基於redux

1. 全局的store
2. 響應式
3. 不能直接修改，commit（mutation）

vuex使用單一狀態樹 吧store的實例注入到全部的子組件，mutation處理同步事務

4. action ： 提交mutation，異步
5. module

vue更新data

1. 異步更新
2. 屢次更新data，只在最後一次渲染

react的setState

state → 生命週期處理 → 觸發render → 建立虛擬DOM → 生成fiberDom → diff → 生成新的任務 → 任務分片 → 渲染
複製代碼

1. 兩個參數。setState(updater,[callback]),第一個參數是更新的對象，第二個參數是更新完成的回調函數；
2. setStat自己執行過程和代碼是同步的
3. 合成事件(onClick、onChanged等)和鉤子函數中setState是異步的，將屢次合併成一次更新；
4. 在原生事件和 setTimeout 中都是同步的。
5. 淺合併 Objecr.assign()

react的setState流程

1. 將state放入數組（隊列）；
2. 檢查是否在更新階段
3. 是：組件放在dirtyComponent
4. 否：調用update更新，標記當前處於更新階段
5. 最後再遍歷dirtyComponent執行更新

react和vue的比較

相同

1. vitual dom
2. 組件化
3. props，單一數據流

不一樣點

1. react是jsx和模板；（jsx能夠進行更多的js邏輯和操做）
2. 狀態管理（react）
3. 對象屬性（vue）
4. vue：view——medol之間雙向綁定
5. vue：組件之間的通訊（props，callback，emit）

路由

1. HTML5 提供的history API (pushState,replaceState,popsState)
2. hashRouter。原理：window.location.hash不刷新，window.location.pathname要刷新
3. history（H5)。window.history.pushState不刷新，改變pathname