Vue 前端面試題

2022-06-23 22:57:19 字數 4759 閱讀 9011

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

vue 實現資料雙向繫結主要是:採用資料劫持結合“釋出者 - 訂閱者”模式的方式,通過object.defineproperty()來劫持各個屬性的settergetter,在資料變動時釋出訊息給訂閱者,觸發相應監聽**。

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 的理解

mvc

特點:1、view傳送指令到controller

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

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

所有通訊都是單向的。

mvvm

特點: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還是falsehtml元素都會存在,只是 css 中的display顯示或隱藏。

9. $route 和 $router 的區別

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

$route為當前router跳轉物件裡面可以獲取namepathqueryparams等。

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元件的scoped的作用 在style中加scoped屬性,表示它的樣式作用於當下模組,很好的實現樣式私有化的目的 但是在很多時候我們都要對公共樣式進行調整 但是寫在scoped屬性下無作用 解決方法 1 混合型使用 2 深度作用選擇器 如果想在scoped中影響到子元件的樣式可以使用 二...

面試官版前端面試小冊Vue篇(二)

答案 computed 預設computed也是一個watcher具備快取,只有當依賴的資料變化時才會計算 當資料沒有變化時 它會讀取快取資料。如果一個資料依賴於其他資料,使用computed watch 每次都需要執行函式。watch更適用於資料變化時的非同步操作。如果需要在某個資料變化時做一些事情...