Vue 前端面試題

1. 說一下 vue 的雙向繫結資料的原理

vue 實現資料雙向繫結主要是：採用資料劫持結合「發布者 - 訂閱者」模式的方式，通過object.defineproperty()來劫持各個屬性的setter、getter，在資料變動時發布訊息給訂閱者，觸發相應監聽**。

2. 解釋單向資料流和雙向資料繫結

單向資料流：顧名思義，資料流是單向的。資料流動方向可以跟蹤，流動單一，追查問題的時候可以更快捷。缺點就是寫起來不太方便。要使 ui 發生變更就必須建立各種action來維護對應的state。

雙向資料繫結：資料之間是相通的，將資料變更的操作隱藏在框架內部。優點是在表單互動較多的場景下，會簡化大量與業務無關的**。缺點就是無法追蹤區域性狀態的變化，增加了出錯時 debug 的難度。

3. vue 如何去除 url 中的

vue-router預設使用hash模式，所以在路由載入的時候，專案中的 url 會自帶「#」。如果不想使用「#」，可以使用vue-router的另一種模式history：

new
router()

需要注意的是，當我們啟用history模式的時候，由於我們的專案是乙個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現「404」的情況，這時候就需要服務端增加乙個覆蓋所有情況的候選資源：如果 url 匹配不到任何靜態資源，則應該返回同乙個「index.html」頁面。

4. 對 mvc、mvvm 的理解

特點：1、view傳送指令到controller；

2、controller完成業務邏輯後，要求model改變狀態；

3、model將新的資料傳送到view，使用者得到反饋。

所有通訊都是單向的。

特點：1、各部分之間的通訊，都是雙向的；

2、採用雙向繫結：view的變動，自動反映在viewmodel，反之亦然。

5. vue 生命週期的理解

vue 例項有乙個完整的生命週期，生命週期也就是指乙個例項從開始建立到銷毀的這個過程。

1、beforecreated()：在例項建立之間執行，資料未載入狀態。

2、created()：在例項建立、資料載入後，能初始化資料，dom 渲染之前執行。

3、beforemount()：虛擬 dom 已建立完成，在資料渲染前最後一次更改資料。

4、mounted()：頁面、資料渲染完成，真實 dom 掛載完成。

5、beforeupadate()：重新渲染之前觸發。

6、updated()：資料已經更改完成，dom 也重新 render 完成，更改資料會陷入死迴圈。

7、beforedestory()和destoryed()：前者是銷毀前執行（例項仍然完全可用），後者則是銷毀後執行。

6. 元件通訊

父元件向子元件通訊

子元件通過props屬性，繫結父元件資料，實現雙方通訊。

子元件向父元件通訊

將父元件的事件在子元件中通過$emit觸發。

非父子元件、兄弟元件之間的資料傳遞

/*
新建乙個vue例項作為**事件總嫌
*/let event = new
vue();
/*監聽事件
*/event.$on('eventname', (val) =>);
/*觸發事件
*/event.$emit('eventname', 'this is a message.')

7. vue-router 路由實現

路由就是用來跟後端伺服器進行互動的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。

8. v-if 和 v-show 區別

使用v-if的時候，如果值為false，那麼頁面將不會有這個html標籤生成。

v-show則是不管值為true還是false，html元素都會存在，只是 css 中的display顯示或隱藏。

9. $route 和 $router 的區別

$router為vuerouter例項，想要導航到不同url，則使用$router.push方法。

$route為當前router跳轉物件裡面可以獲取name、path、query、params等。

10. nexttick 是做什麼的

$nexttick是在下次 dom 更新迴圈結束之後執行延遲**，在修改資料之後使用$nexttick，則可以在**中獲取更新後的 dom。

11. vue 元件 data 為什麼必須是函式

因為 js 本身的特性帶來的，如果data是乙個物件，那麼由於物件本身屬於引用型別，當我們修改其中的乙個屬性時，會影響到所有 vue 例項的資料。如果將data作為乙個函式返回乙個物件，那麼每乙個例項的data屬性都是獨立的，不會相互影響了。

12. 計算屬性 computed 和事件 methods 有什麼區別

我們可以將同一函式定義為乙個method或者乙個計算屬性。對於最終的結果，兩種方式是相同的。

不同點：

2、method：只要發生重新渲染，method呼叫總會執行該函式。

13. 對比 jquery ，vue 有什麼不同

jquery 專注檢視層，通過操作 dom 去實現頁面的一些邏輯渲染； vue 專注於資料層，通過資料的雙向繫結，最終表現在 dom 層面，減少了 dom 操作。

vue 使用了元件化思想，使得專案子集職責清晰，提高了開發效率，方便重複利用，便於協同開發。

16. vue 中怎麼自定義指令

全域性註冊

//
註冊乙個全域性自定義指令 `v-focus`
vue.directive('focus', 
})

區域性註冊

directives: }}

15. vue 中怎麼自定義過濾器

可以用全域性方法vue.filter()註冊乙個自定義過濾器，它接收兩個引數：過濾器 id 和過濾器函式。過濾器函式以值為引數，返回轉換後的值。

vue.filter('reverse', function
(value) )

過濾器也同樣接受全域性註冊和區域性註冊。

16. 對 keep-alive 的了解

keep-alive是 vue 內建的乙個元件，可以使被包含的元件保留狀態，或避免重新渲染。

可以使用 api 提供的props，實現元件的動態快取。

17. vue 中 key 的作用

key的特殊屬性主要用在 vue 的虛擬 dom 演算法，在新舊nodes對比時辨識vnodes。如果不使用key，vue 會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同型別元素的演算法。使用key，它會基於key的變化重新排列元素順序，並且會移除key不存在的元素。

有相同父元素的子元素必須有獨特的key。重複的key會造成渲染錯誤。

具體參考官方api(

18. vue 的核心是什麼

資料驅動、元件系統。

19. vue 等單頁面應用的優缺點

優點

1、良好的互動體驗

2、良好的前後端工作分離模式

3、減輕伺服器壓力

缺點

1、seo 難度較高

2、前進、後退管理

3、初次載入耗時多

Vue 前端面試題

前端面試題（Vue篇）

前端面試題

前端面試題

相關推薦