前端面試大全2019

一、對mvvm模式的理解？
mvvm是model view viewModel的縮寫 model 是數據模型 定義數據修改和操做的業務邏輯 view是ui組件 將數據模型轉換成Ui展示出來 viewModel監聽模型數據的改變 控制視圖行爲 處理用戶交互 經過雙向數據綁定將view和model鏈接起來 view和model之間的同步是自動的 無需人爲干涉 因此開發者只須要關注業務邏輯而不須要操做dom 更無須關注數據狀態的同步問題 複雜的數據狀態維護就交給mvvm統一管理。

二、vue生命週期？
vue實例從建立到銷燬的過程，就是生命週期。 也就是從開始建立、初始化數據，編譯模板、掛載DOM —渲染、更新—渲染、卸載等一系列過程，稱爲Vue的生命週期 分爲 8個階段 建立先後 載入先後 更新先後 銷燬先後。
BeforeCreate 組件實例剛剛被建立，獲取不到props或者data中的數據，這些數據初始化都在initState中。
Created 實例已經被建立完成以後調用，能夠訪問到以前不能訪問到的數據，可是組件尚未被掛載。
BeforeMount 掛載開始以前被調用。
Mounted dom節點被渲染到文檔內，一些須要dom的操做在此時才能正常進行。
BeforeUpdate 數據更新時調用，發生在虛擬dom從新渲染以前 在這個鉤子中進一步地更改狀態 不會觸發附加的重渲染過程
Update 組件DOM已經更新，能夠執行依賴於DOM的操做，但應該避免在此期間更改狀態 有可能會致使更新無限循環。
BeforeDestory 實例銷燬以前調用，實例仍然能夠調用。
Destroyed 實例被銷燬後調用 調用後vue實例指示的全部東西都會解綁，事件監聽器會被移除，全部子實例也會被銷燬，該鉤子在服務器端渲染期間不被調用。

三、Vue實現雙向數據綁定的原理？
vue數據雙向綁定是經過數據劫持結合發佈者-訂閱者模式的方式來實現的，經過劫持object.defineProperty()中的set和get屬性。

四、Vue組件間傳遞參數？
父組件給子組件：父組件經過子標籤綁定的屬性，子組件經過props接收
子組件給父組件：子組件經過emit將值傳給父組件，父組件監聽子組件觸發的事件 兄弟通訊：this.parent.children 在children中能夠經過組件name查詢到須要的組件實例，而後傳值

五、React和Vue的區別？
相同：都支持服務器端渲染，組件化開發經過props參數進行父子組件數據的傳遞，數據驅動視圖，
不一樣：vue是雙向數據綁定，react數據流動是單向的。Vue渲染過程是跟蹤每個組件的依賴，更改了哪一個組件渲染哪一個，react從新渲染所有組件

六、對keep-alive的瞭解？
是Vue的內置組件，可使被包含的組件保留狀態，避免從新渲染
擁有兩個獨有的生命週期鉤子函數，activated和deactivated
被包裹在keep-alive中的組件的狀態將會被保留，例如咱們將某個列表類組件內容滑動到第100條位置，那麼咱們在切換到一個組件後再次切換回到該組件，該組件的位置狀態依舊會保持在第100條列表處

7.<keep-alive></keep-alive>的做用是什麼?
<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。
大白話: 好比有一個列表和一個詳情，那麼用戶就會常常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那麼就能夠對列表組件使用<keep-alive></keep-alive>進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是從新渲染

八、route和router的區別？
route是路由信息對象，包括path params query name等路由信息參數router是路由實例對象，包括了路由的跳轉方法，鉤子函數等
query和params的區別：query至關於get請求，頁面跳轉的時候能夠在地址欄看到請求參數，用path來引入；params至關於post，地址欄不顯示參數 用name來引入
路由的鉤子函數：beforEach
to:即將要進入的目標 包括的屬性（path params query name meta matched fullPath）

九、vue經常使用的修飾符？
.prevent 阻止元素默認跳轉 .stop 阻止單擊事件冒泡 .capture捕獲 .once 只執行一次

十、怎麼定義vue-router的動態路由以及如何獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id
使用router對象的params.id

十一、vue+axios登陸攔截
在定義路由的時候加上requireAuth，判斷該路由的訪問是否須要登陸 若是已經登陸則順利進入頁面。定義完路由後利用vue-router提供的鉤子函數beforeEach()對路由進行判斷 判斷是否須要登陸權限，判斷是否存在token
想要統一處理全部http請求和響應，用axios攔截器 經過配置http response inteceptor ,當後端返回401時，則未受權 讓用戶從新登陸

十二、Vuex是什麼？怎麼使用？哪一種功能場景使用它？
只用來讀取的狀態集中放在sotre中，改變狀態的方式是提交mutations，這是個同步事物；異步邏輯應該封裝在action中
組件渲染以後，與用戶產生交互，觸發一些行爲(dispatch ---->action)，這些行爲會提交一些修改數據的行爲(commit ---->mutations)， 這些行爲會主動修改狀態(state)中的數據，狀態數據的改變會更新組件

1三、vue路由原理
只有2種實現方式 hash模式和history模式
hash模式：帶#號的，當#後面的哈希值發生變化時，能夠經過hashchange事件來監聽到URL變化，進行頁面跳轉（簡單，兼容性好）
history模式：h5新功能，使用history.pushState和history.replaceState改變URL

1四、computed和watch區別
computed是計算屬性，依賴其餘屬性計算值，而且computed的值有緩存，只有當計算值變化纔會返回內容
Watch監聽到值的變化就會執行回調，在回調中進行一些邏輯操做
通常須要依賴別的屬性來動態得到值的時候可使用computed
對於監聽到值的變化須要作一些複雜業務邏輯的狀況可使用watch

1五、v-if和v-show的區別
v-show 只是經過設置dom元素的display控制顯示隱藏
V-if 是動態的添加或刪除dom元素

想學前端的小夥伴，能夠關注+私信回覆《資料》免費獲取哦~

感謝您的閱讀！喜歡的能夠收藏轉發哦~