58 道 Vue 常見面試題集錦,涵蓋入門到精通,自測 Vue 掌握程度

來自:知乎
作者:Lucky Girl
原文鏈接

1. Vue的優點?

  • 輕量級框架:只關注視圖層,是一個構建數據的視圖集合,大小只有幾十 kb ;
  • 簡單易學:國人開發,中文文檔,不存在語言障礙 ,易于理解和學習;
  • 雙向數據綁定:保留了 angular 的特點,在數據操作方面更為簡單;
  • 組件化:保留了 react 的優點,實現了 html 的封裝和重用,在構建單頁面應用方面有著獨特的優勢;
  • 視圖,數據,結構分離:使數據的更改更為簡單,不需要進行邏輯代碼的修改,只需要操作數據就能完成相關操作;
  • 虛擬DOM:dom 操作是非常耗費性能的, 不再使用原生的 dom 操作節點,極大解放 dom 操作,但具體操作的還是 dom 不過是換了另一種方式;
  • 運行速度更快:相比較與 react 而言,同樣是操作虛擬 dom ,就性能而言, vue 存在很大的優勢。

2. vue父組件如何向子組件傳遞數據?

通過 props

3. 子組件如何向父組件傳遞事件?

$emit方法

4. v-show 和 v-if指令的共同點和不同點?

共同點:

都能控制元素的顯示和隱藏

不同點:

實現本質方法不同

  • v-show 本質就是通過控制 css 中的 display 設置為 none ,控制隱藏,只會編譯一次;
  • v-if 是動態的向 DOM 樹內添加或者刪除 DOM 元素,若初始值為 false ,就不會編譯了。而且 v-if 不停的銷毀和創建比較消耗性能。

總結:如果要頻繁切換某節點,使用 v-show (切換開銷比較小,初始開銷較大)。如果不需要頻繁切換某節點使用 v-if(初始渲染開銷較小,切換開銷比較大)。

5. 如何讓CSS只在當前組件中起作用?

為組件的style標簽添加scoped屬性

6. <keep-alive></keep-alive> 的作用是什么?

keep-alive 是 Vue 內置的一個組件,可以使被包含的組件保留狀態,或避免重新渲染。

7. 如何獲取dom?

添加ref屬性

使用$refs獲取

例子:

<template>
    <div>
        <h1 ref="headOne">Vue</h1>
    </div>
</template>

<script>
    export default {
        created() {
            console.log(this.$refs.headOne)
        }
    }
</script>

8. 說出幾種vue當中的指令和它的用法?

  • v-model 雙向數據綁定
  • v-for 循環
  • v-if, v-show 顯示與隱藏
  • v-on 事件;v-once : 只綁定一次

9. vue-loader是什么?使用它的用途有哪些?

vue 文件的一個加載器,將 template/js/style 轉換成 js 模塊。

用途:

js 可以寫 es6 、 style樣式可以 scss 或 less 、 template 可以加 jade 等

10. 為什么使用key?

需要使用 key 來給每個節點做一個唯一標識, Diff 算法就可以正確的識別此節點。作用主要是為了高效的更新虛擬 DOM。

11. axios及安裝?

請求后臺資源的模塊。

npm install axios —save 裝好, js中使用 import 進來,然后 .get 或 .post 。返回結果在 .then 函數中,如果失敗則是在 .catch 函數中。

12. v-modal的使用

v-model 用于表單數據的雙向綁定,其實它就是一個語法糖,這個背后就做了兩個操作:v-bind 綁定一個 value 屬性;v-on 指令給當前元素綁定 input 事件

13. 請說出vue.cli項目中src目錄每個文件夾和文件的用法?

assets 文件夾是放靜態資源;
components 是放組件;
router 是定義路由相關的配置;
app.vue 是一個應用主組件;
main.js 是入口文件。

14. 分別簡述computed和watch的使用場景

  • computed : 當一個屬性受多個屬性影響的時候就需要用到 computed ,最典型的例子:購物車商品結算的時候
  • watch : 當一條數據影響多條數據的時候就需要用 watch ,例子:搜索數據

15. v-on可以監聽多個方法嗎?

可以

    <input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

16. $nextTick的使用

當你修改了data 的值然后馬上獲取這個 dom 元素的值,是不能獲取到更新后的值, 你需要使用 $nextTick 這個回調,讓修改后的 data 值渲染更新到 dom 元素之后再獲取,才能成功。

17. vue組件中data為什么必須是一個函數?

因為 JavaScript 的特性所導致,在 component 中,data 必須以函數的形式存在,不可以是對象。組件中的 data 寫成一個函數,數據以函數返回值的形式定義,這樣每次復用組件的時候,都會返回一份新的 data ,相當于每個組件實例都有自己私有的數據空間,它們只負責各自維護的數據,不會造成混亂。而單純的寫成對象形式,就是所有的組件實例共用了一個 data ,這樣改一個全都改了。

18. 漸進式框架的理解

  • 主張最少
  • 可以根據不同的需求選擇不同的層級

19. Vue中雙向數據綁定是如何實現的?

vue 雙向數據綁定是通過 數據劫持 結合 發布訂閱模式的方式來實現的, 也就是說數據和視圖同步,數據發生變化,視圖跟著變化,視圖變化,數據也隨之發生改變;核心:關于VUE雙向數據綁定,其核心是 Object.defineProperty() 方法。

20. 單頁面應用和多頁面應用區別及優缺點

單頁面應用(SPA),通俗一點說就是指只有一個主頁面的應用,瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候,還是會分開寫(頁面片段),然后在交互的時候由路由程序動態載入,單頁面的頁面跳轉,僅刷新局部資源。多應用于pc端。

多頁面(MPA),就是指一個應用中有多個頁面,頁面跳轉時是整頁刷新

單頁面的優點:用戶體驗好,快,內容的改變不需要重新加載整個頁面,基于這一點spa對服務器壓力較??;前后端分離;頁面效果會比較炫酷(比如切換頁面內容時的專場動畫)。

單頁面缺點:不利于seo;導航不可用,如果一定要導航需要自行實現前進、后退。(由于是單頁面不能用瀏覽器的前進后退功能,所以需要自己建立堆棧管理);初次加載時耗時多;頁面復雜度提高很多。

21. v-if和v-for的優先級

當 v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優先級,這意味著 v-if 將分別重復運行于每個 v-for 循環中。所以,不推薦 v-if 和 v-for 同時使用。如果 v-if 和 v-for 一起用的話,vue會自動提示 v-if 應該放到外層去。

22. assets和static的區別

相同點: assets 和 static 兩個都是存放靜態資源文件。項目中所需要的資源文件圖片,字體圖標,樣式文件等都可以放在這兩個文件下

不同點:assets 中存放的靜態資源文件在項目打包時,也就是運行 npm run build 時會將 assets 中放置的靜態資源文件進行打包上傳,所謂打包簡單點可以理解為壓縮體積,代碼格式化。而壓縮后的靜態資源文件最終也都會放置在 static 文件中跟著 index.html 一同上傳至服務器。static 中放置的靜態資源文件就不會要走打包壓縮格式化等流程,而是直接進入打包好的目錄,直接上傳至服務器。因為避免了壓縮直接進行上傳,在打包時會提高一定的效率,但是 static 中的資源文件由于沒有進行壓縮等操作,所以文件的體積也就相對于 assets 中打包后的文件提交較大點。在服務器中就會占據更大的空間。

建議: 將項目中 template需要的樣式文件js文件等都可以放置在 assets 中,走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoont.css 等文件可以放置在 static 中,因為這些引入的第三方文件已經經過處理,我們不再需要處理,直接上傳。

23. vue常用的修飾符

  • .stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡;

  • .prevent :等同于 JavaScript 中的 event.preventDefault() ,防止執行預設的行為(如果事件可取消,則取消該事件,而不停止事件的進一步傳播);

  • .capture :與事件冒泡的方向相反,事件捕獲由外到內;

  • .self :只會觸發自己范圍內的事件,不包含子元素;

  • .once :只會觸發一次。

24. vue的兩個核心點

數據驅動、組件系統

數據驅動: ViewModel,保證數據和視圖的一致性。

**組件系統: **應用類UI可以看作全部是由組件樹構成的。

25. vue和jQuery的區別

jQuery是使用選擇器( )選取DOM對象,對其進行賦值、取值、事件綁定等操作,其實和原生的HTML的區別只在于可以更方便的選取和操作DOM對象,而數據和界面是在一起的。比如需要獲取label標簽的內容:("lable").val(); ,它還是依賴DOM元素的值。

Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象,可以說數據和View是分離的,他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

26. 引進組件的步驟

在template中引入組件;在script的第一行用import引入路徑;用component中寫上組件名稱。

27. delete和Vue.delete刪除數組的區別

delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數組 改變了數組的鍵值。

28. SPA首屏加載慢如何解決

安裝動態懶加載所需插件;
使用CDN資源。

29. Vue-router跳轉和location.href有什么區別

使用 location.href= /url 來跳轉,簡單方便,但是刷新了頁面;

使用 history.pushState( /url ) ,無刷新頁面,靜態跳轉;

引進 router ,然后使用 router.push( /url ) 來跳轉,使用了 diff 算法,實現了按需加載,減少了 dom 的消耗。其實使用 router 跳轉和使用 history.pushState() 沒什么差別的,因為vue-router就是用了 history.pushState() ,尤其是在history模式下。

30. vue slot

簡單來說,假如父組件需要在子組件內放一些DOM,那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示,就是slot分發負責的活。

31. 你們vue項目是打包了一個js文件,一個css文件,還是有多個文件?

根據vue-cli腳手架規范,一個js文件,一個CSS文件。

32. Vue里面router-link在電腦上有用,在安卓上沒反應怎么解決?

Vue路由在Android機上有問題,babel問題,安裝babel polypill插件解決。

33. Vue2中注冊在router-link上事件無效解決方法

使用 @click.native 。原因:router-link會阻止click事件,.native指直接監聽一個原生事件。

34. RouterLink在IE和Firefox中不起作用(路由不跳轉)的問題

方法一:只用a標簽,不適用button標簽;

方法二:使用button標簽和Router.navigate方法

35. axios的特點有哪些?

  • 從瀏覽器中創建XMLHttpRequests;

  • node.js創建http請求;

  • 支持Promise API;

  • 攔截請求和響應;

  • 轉換請求數據和響應數據;

  • 取消請求;

  • 自動換成json。

  • axios中的發送字段的參數是data跟params兩個,兩者的區別在于params是跟請求地址一起發送的,data的作為一個請求體進行發送

  • params一般適用于get請求,data一般適用于post put 請求。

36. 請說下封裝 vue 組件的過程?

建立組件的模板,先把架子搭起來,寫寫樣式,考慮好組件的基本邏輯。(os:思考1小時,碼碼10分鐘,程序猿的準則。)

準備好組件的數據輸入。即分析好邏輯,定好 props 里面的數據、類型。

準備好組件的數據輸出。即根據組件邏輯,做好要暴露出來的方法。

封裝完畢了,直接調用即可

37. params和query的區別

用法:query要用path來引入,params要用name來引入,接收參數都是類似的,分別是 this.route.query.name 和 this.route.params.name 。url地址顯示:query更加類似于我們ajax中get傳參,params則類似于post,說的再簡單一點,前者在瀏覽器地址欄中顯示參數,后者則不顯示

注意點:query刷新不會丟失query里面的數據 params刷新 會 丟失 params里面的數據。

38. vue初始化頁面閃動問題

使用vue開發時,在vue初始化之前,由于 div 是不歸 vue 管的,所以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象,看到類似于 {{message}} 的字樣,雖然一般情況下這個時間很短暫,但是我們還是有必要讓解決這個問題的。首先:在css里加上 [v-cloak] { display: none; } 。如果沒有徹底解決問題,則在根元素加上 style="display: none;" :style="{display: block }"

39.vue更新數組時觸發視圖更新的方法

push();pop();shift();unshift();splice();sort();reverse()

40. vue常用的UI組件庫

Mint UI,element,Vant,view-design

41. vue修改打包后靜態資源路徑的修改

cli2 版本:將 config/index.js 里的 assetsPublicPath 的值改為 ./

build: { 
  // ... 
  assetsPublicPath:  ./ , 
  // ...  
} 

cli3版本:在根目錄下新建vue.config.js 文件,然后加上以下內容:(如果已經有此文件就直接修改)

module.exports = { 
  publicPath:'/',   // 根路徑    
} 

生命周期函數面試題篇

42. 什么是 vue 生命周期?有什么作用?

每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如,需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數,這給了用戶在不同階段添加自己的代碼的機會。(ps:生命周期鉤子就是生命周期函數)例如,如果要通過某些插件操作DOM節點,如想在頁面渲染完后彈出廣告窗, 那我們最早可在mounted 中進行。

43. 第一次頁面加載會觸發哪幾個鉤子?

beforeCreate, created, beforeMount, mounted

44. 簡述每個周期具體適合哪些場景

**beforeCreate: **在new一個vue實例后,只有一些默認的生命周期鉤子和默認事件,其他的東西都還沒創建。在beforeCreate生命周期執行的時候,data和methods中的數據都還沒有初始化。不能在這個階段使用data中的數據和methods中的方法

created: data 和 methods都已經被初始化好了,如果要調用 methods 中的方法,或者操作 data 中的數據,最早可以在這個階段中操作

beforeMount: 執行到這個鉤子的時候,在內存中已經編譯好了模板了,但是還沒有掛載到頁面中,此時,頁面還是舊的

mounted: 執行到這個鉤子的時候,就表示Vue實例已經初始化完成了。此時組件脫離了創建階段,進入到了運行階段。如果我們想要通過插件操作頁面上的DOM節點,最早可以在和這個階段中進行

beforeUpdate: 當執行這個鉤子時,頁面中的顯示的數據還是舊的,data中的數據是更新后的, 頁面還沒有和最新的數據保持同步

updated: 頁面顯示的數據和data中的數據已經保持同步了,都是最新的

beforeDestory: Vue實例從運行階段進入到了銷毀階段,這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處于可用狀態。還沒有真正被銷毀

destroyed: 這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處于不可用狀態。組件已經被銷毀了。

45. created和mounted的區別

created:在模板渲染成html前調用,即通常初始化某些屬性值,然后再渲染成視圖。

mounted:在模板渲染成html后調用,通常是初始化頁面完成后,再對html的dom節點進行一些需要的操作。

46. vue獲取數據在哪個周期函數?

一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.

47. 請詳細說下你對vue生命周期的理解?

總共分為8個階段創建前/后,載入前/后,更新前/后,銷毀前/后。

創建前/后: 在beforeCreated階段,vue實例的掛載元素 el 和 數據對象 data 都為undefined,還未初始化。在created階段,vue實例的數據對象data有了,el 還沒有。

載入前/后: 在beforeMount階段,vue實例的 $el 和data都初始化了,但還是掛載之前為虛擬的dom節點,data.message還未替換。在mounted階段,vue實例掛載完成,data.message成功渲染。

更新前/后: 當data變化時,會觸發beforeUpdate和updated方法。

銷毀前/后: 在執行destroy方法后,對data的改變不會再觸發周期函數,說明此時vue實例已經解除了事件監聽以及和dom的綁定,但是dom結構依然存在。

vue 路由面試題篇

48. mvvm 框架是什么?

vue是實現了雙向數據綁定的mvvm框架,當視圖改變更新模型層,當模型層改變更新視圖層。在vue中,使用了雙向綁定技術,就是View的變化能實時讓Model發生變化,而Model的變化也能實時更新到View。

49. vue-router 是什么?它有哪些組件?

vue用來寫路由一個插件。router-link、router-view

50. active-class 是哪個組件的屬性?

vue-router模塊的router-link組件。children數組來定義子路由

51. 怎么定義 vue-router 的動態路由? 怎么獲取傳過來的值?

在router目錄下的index.js文件中,對path屬性加上/:id。使用router對象的params.id。

52. vue-router 有哪幾種導航鉤子?

三種,

第一種: 是全局導航鉤子:router.beforeEach(to,from,next),作用:跳轉前進行判斷攔截。

第二種: 組件內的鉤子

第三種: 單獨路由獨享組件

53. route 和router 的區別

router 是VueRouter的實例,在script標簽中想要導航到不同的URL,使用router.push 方法。返回上一個歷史history用 $router.to(-1)

$route 為當前router跳轉對象。里面可以獲取當前路由的name,path,query,parmas等。

54. vue-router的兩種模式

hash模式: 即地址欄 URL 中的 # 符號;

history模式: window.history對象打印出來可以看到里邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定瀏覽器支持)。

55. vue-router實現路由懶加載( 動態加載路由 )

三種方式

第一種: vue異步組件技術 ==== 異步加載,vue-router配置路由 , 使用vue的異步組件技術 , 可以實現按需加載 .但是,這種情況下會一個組件生成一個js文件。

第二種: 路由懶加載(使用import)。

第三種: webpack提供的require.ensure(),vue-router配置路由,使用webpack的require.ensure技術,也可以實現按需加載。這種情況下,多個路由指定相同的chunkName,會合并打包成一個js文件。

Vuex常見面試題篇

56. vuex是什么?怎么使用?哪種功能場景使用它?

vue框架中狀態管理。在main.js引入store,注入。

新建了一個目錄store.js,….. export 。

場景有:單頁應用中,組件之間的狀態。音樂播放、登錄狀態、加入購物車

57. vuex有哪幾種屬性?

有五種,分別是 State、 Getter、Mutation 、Action、 Module

state => 基本數據(數據源存放地)

getters => 從基本數據派生出來的數據

mutations => 提交更改數據的方法,同步!

actions => 像一個裝飾器,包裹mutations,使之可以異步。

modules => 模塊化Vuex

58. Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中?

如果請求來的數據是不需要被其他組件公用,僅僅在請求的組件內使用,就不需要放入vuex 的actions中。

如果被其他地方復用,這個很大幾率上是需要的,如果需要,請將請求放入action里,方便復用。

以上面試題僅供個人學習,如有錯誤請指正。謝謝。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。