導(dǎo)讀輕量級(jí)框架：只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十kb；，我來(lái)為大家科普一下關(guān)于vue前端實(shí)習(xí)生的面試題?下面希望有你要的答案，我們一起來(lái)看看....

輕量級(jí)框架：只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十 kb；，我來(lái)為大家科普一下關(guān)于vue前端實(shí)習(xí)生的面試題?下面希望有你要的答案，我們一起來(lái)看看吧!

vue前端實(shí)習(xí)生的面試題

1.vue 優(yōu)點(diǎn)？

輕量級(jí)框架：只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十 kb；

簡(jiǎn)單易學(xué)：國(guó)人開發(fā)，中文文檔，不存在語(yǔ)言障礙 ，易于理解和學(xué)習(xí)；

雙向數(shù)據(jù)綁定：保留了 angular 的特點(diǎn)，在數(shù)據(jù)操作方面更為簡(jiǎn)單；

組件化：保留了 react 的優(yōu)點(diǎn)，實(shí)現(xiàn)了 html 的封裝和重用，在構(gòu)建單頁(yè)面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì)；

視圖，數(shù)據(jù)，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡(jiǎn)單，不需要進(jìn)行邏輯代碼的修改，只需要操作數(shù)據(jù)就能完成相關(guān)操作；

虛擬 DOM：dom 操作是非常耗費(fèi)性能的， 不再使用原生的 dom 操作節(jié)點(diǎn)，極大解放 dom操作，但具體操作的還是 dom 不過(guò)是換了另一種方式；

運(yùn)行速度更快: 相比較與 react 而言，同樣是操作虛擬 dom，就性能而言，vue 存在很大的優(yōu)勢(shì)。

2.vue 父組件向子組件傳遞數(shù)據(jù)？

通過(guò) props

3.子組件像父組件傳遞事件？

$emit 方法

4.v-show 和 v-if 指令的共同點(diǎn)和不同點(diǎn)？

共同點(diǎn)：都能控制元素的顯示和隱藏；

不同點(diǎn)：實(shí)現(xiàn)本質(zhì)方法不同，v-show 本質(zhì)就是通過(guò)控制 css 中的 display 設(shè)置為 none，控制隱藏，只會(huì)編譯一次；v-if 是動(dòng)態(tài)的向 DOM 樹內(nèi)添加或者刪除 DOM 元素，若初始值為false，就不會(huì)編譯了。而且 v-if 不停的銷毀和創(chuàng)建比較消耗性能。

總結(jié)：如果要頻繁切換某節(jié)點(diǎn)，使用 v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用 v-if（初始渲染開銷較小，切換開銷比較大）。

5. 如何讓 CSS 只在當(dāng)前組件中起作用？

在組件中的 style 前面加上 scoped

6. 的作用是什么?

keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

7.如何獲取 dom?

ref="domName" 用法：this.$refs.domName

8.說(shuō)出幾種 vue 當(dāng)中的指令和它的用法？

答：v-model 雙向數(shù)據(jù)綁定；

v-for 循環(huán)；

v-if v-show 顯示與隱藏；

v-on 事件；v-once: 只綁定一次。

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

答：vue 文件的一個(gè)加載器，將 template/js/style 轉(zhuǎn)換成 js 模塊。

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

10.為什么使用 key?

答：需要使用 key 來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff 算法就可以正確的識(shí)別此節(jié)點(diǎn)。作用主要是為了高效的更新虛擬 DOM。

11.axios 及安裝?

答：請(qǐng)求后臺(tái)資源的模塊。npm install axios --save 裝好，js 中使用 import 進(jìn)來(lái)，然后. get 或. post。返回在. then 函數(shù)中如果成功，失敗則是在.catch 函數(shù)中。

12.v-modal 的使用。

答：v-model 用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語(yǔ)法糖，這個(gè)背后就做了兩個(gè)操作：

v-bind 綁定一個(gè) value 屬性；

v-on 指令給當(dāng)前元素綁定 input 事件。

13. 請(qǐng)說(shuō)出 vue.cli 項(xiàng)目中 src 目錄每個(gè)文件夾和文件的用法？

答：assets 文件夾是放靜態(tài)資源；components 是放組件；router 是定義路由相關(guān)的配置;app.vue 是一個(gè)應(yīng)用主組件；main.js 是入口文件。

14. 分別簡(jiǎn)述 computed 和 watch 的使用場(chǎng)景

答：computed:

當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到 computed最典型的栗子： 購(gòu)物車商品結(jié)算的時(shí)候

watch:

當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用 watch

栗子：搜索數(shù)據(jù)

15.v-on 可以監(jiān)聽多個(gè)方法嗎？

答：可以

16.$nextTick 的使用

答：當(dāng)你修改了 data 的值然后馬上獲取這個(gè) dom 元素的值，是不能獲取到更新后的值，你需要使用 $nextTick 這個(gè)回調(diào)，讓修改后的 data 值渲染更新到 dom 元素之后在獲取，才能成功。

17.vue 組件中 data 為什么必須是一個(gè)函數(shù)？

答：因?yàn)?JavaScript 的特性所導(dǎo)致，在 component 中，data 必須以函數(shù)的形式存在，不可以是對(duì)象。

組建中的 data 寫成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義，這樣每次復(fù)用組件的時(shí)候，都會(huì)返回一份新的 data，相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間，它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)，不會(huì)造成混亂。而單純的寫成對(duì)象形式，就是所有的組件實(shí)例共用了一個(gè) data，這樣改一個(gè)全都改了。

18. 漸進(jìn)式框架的理解

答：主張最少；可以根據(jù)不同的需求選擇不同的層級(jí)；

19.Vue 中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

答：vue 雙向數(shù)據(jù)綁定是通過(guò) 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的， 也就是說(shuō)數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變；

核心：關(guān)于 VUE 雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty() 方法。

20. 單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)

答：?jiǎn)雾?yè)面應(yīng)用（SPA），通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中。但在寫的時(shí)候，還是會(huì)分開寫（頁(yè)面片段），然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入，單頁(yè)面的頁(yè)面跳轉(zhuǎn)，僅刷新局部資源。多應(yīng)用于 pc 端。

多頁(yè)面（MPA），就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面，頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新

單頁(yè)面的優(yōu)點(diǎn)：

用戶體驗(yàn)好，快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，基于這一點(diǎn) spa 對(duì)服務(wù)器壓力較小；前后端分離；頁(yè)面效果會(huì)比較炫酷（比如切換頁(yè)面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫）。

單頁(yè)面缺點(diǎn)：

不利于 seo；導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。（由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能，所以需要自己建立堆棧管理）；初次加載時(shí)耗時(shí)多；頁(yè)面復(fù)雜度提高很多。

21.v-if 和 v-for 的優(yōu)先級(jí)

答：當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。所以，不推薦 v-if 和 v-for 同時(shí)使用。

如果 v-if 和 v-for 一起用的話，vue 中的的會(huì)自動(dòng)提示 v-if 應(yīng)該放到外層去。

22.assets 和 static 的區(qū)別

答：相同點(diǎn)：assets 和 static 兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片，字體圖標(biāo)，樣式文件等都可以放在這兩個(gè)文件下，這是相同點(diǎn)

不相同點(diǎn)：assets 中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí)，也就是運(yùn)行 npm run build 時(shí)會(huì)將assets 中放置的靜態(tài)資源文件進(jìn)行打包上傳，所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積，代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在 static 文件中跟著 index.html 一同上傳至服務(wù)器。static 中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程，而是直接進(jìn)入打包好的目錄，直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳，在打包時(shí)會(huì)提高一定的效率，但是 static 中的資源文件由于沒有進(jìn)行壓縮等操作，所以文件的體積也就相對(duì)于 assets 中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。

建議：將項(xiàng)目中 template 需要的樣式文件 js 文件等都可以放置在 assets 中，走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如 iconfoont.css 等文件可以放置在 static中，因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過(guò)處理，我們不再需要處理，直接上傳。

23.vue 常用的修飾符

答：.stop：等同于 JavaScript 中的 event.stopPropagation()，防止事件冒泡；

.prevent：等同于 JavaScript 中的 event.preventDefault()，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件，而不停止事件的進(jìn)一步傳播）；.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)；

.self：只會(huì)觸發(fā)自己范圍內(nèi)的事件，不包含子元素；

.once：只會(huì)觸發(fā)一次。

24.vue 的兩個(gè)核心點(diǎn)

答：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)

數(shù)據(jù)驅(qū)動(dòng)：ViewModel，保證數(shù)據(jù)和視圖的一致性。

組件系統(tǒng)：應(yīng)用類 UI 可以看作全部是由組件樹構(gòu)成的。

25.vue 和 jQuery 的區(qū)別

答：jQuery 是使用選擇器（$）選取 DOM 對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的 HTML 的區(qū)別只在于可以更方便的選取和操作 DOM 對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取 label 標(biāo)簽的內(nèi)容：$("lable").val();, 它還是依賴 DOM 元素的值。

Vue 則是通過(guò) Vue 對(duì)象將數(shù)據(jù)和 View 完全分離開來(lái)了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM 對(duì)象，可以說(shuō)數(shù)據(jù)和 View 是分離的，他們通過(guò) Vue 對(duì)象這個(gè) vm 實(shí)現(xiàn)相互的綁定。這就是傳說(shuō)中的 MVVM。

26. 引進(jìn)組件的步驟

答: 在 template 中引入組件；

在 script 的第一行用 import 引入路徑；

用 component 中寫上組件名稱。

27.delete 和 Vue.delete 刪除數(shù)組的區(qū)別

答：delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。

Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。

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

答：安裝動(dòng)態(tài)懶加載所需插件；使用 CDN 資源。

29.Vue-router 跳轉(zhuǎn)和 location.href 有什么區(qū)別

答：使用 location.href=/url來(lái)跳轉(zhuǎn)，簡(jiǎn)單方便，但是刷新了頁(yè)面；

使用 history.pushState(/url)，無(wú)刷新頁(yè)面，靜態(tài)跳轉(zhuǎn)；

引進(jìn) router，然后使用 router.push(/url) 來(lái)跳轉(zhuǎn)，使用了 diff 算法，實(shí)現(xiàn)了按需加載，減少了 dom 的消耗。

其實(shí)使用 router 跳轉(zhuǎn)和使用 history.pushState() 沒什么差別的，因?yàn)?vue-router 就是用了history.pushState()，尤其是在 history

30. vue slot

答：簡(jiǎn)單來(lái)說(shuō)，假如父組件需要在子組件內(nèi)放一些 DOM，那么這些 DOM 是顯示、不顯示、在哪個(gè)地方顯示、如何顯示，就是 slot 分發(fā)負(fù)責(zé)的活。

31. 你們 vue 項(xiàng)目是打包了一個(gè) js 文件，一個(gè) css 文件，還是有多個(gè)文件？

答：根據(jù) vue-cli 腳手架規(guī)范，一個(gè) js 文件，一個(gè) CSS 文件。

32.Vue 里面 router-link 在電腦上有用，在安卓上沒反應(yīng)怎么解決？

答：Vue 路由在 Android 機(jī)上有問(wèn)題，babel 問(wèn)題，安裝 babel polypill 插件解決。

33.Vue2 中注冊(cè)在 router-link 上事件無(wú)效解決方法

答： 使用 @click.native。原因：router-link 會(huì)阻止 click 事件，.native 指直接監(jiān)聽一個(gè)原生事件。

34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳轉(zhuǎn)）的問(wèn)題

答: 方法一：只用 a 標(biāo)簽，不適用 button 標(biāo)簽；方法二：使用 button 標(biāo)簽和Router.navigate 方法

35.axios 的特點(diǎn)有哪些

答：從瀏覽器中創(chuàng)建 XMLHttpRequests；

node.js 創(chuàng)建 http 請(qǐng)求；

支持 Promise API；

攔截請(qǐng)求和響應(yīng)；

轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；

取消請(qǐng)求；

自動(dòng)換成 json。

axios 中的發(fā)送字段的參數(shù)是 data 跟 params 兩個(gè)，兩者的區(qū)別在于 params 是跟請(qǐng)求地址一起發(fā)送的，data 的作為一個(gè)請(qǐng)求體進(jìn)行發(fā)送params 一般適用于 get 請(qǐng)求，data 一般適用于 post put 請(qǐng)求。

36. 請(qǐng)說(shuō)下封裝 vue 組件的過(guò)程？

答：1. 建立組件的模板，先把架子搭起來(lái)，寫寫樣式，考慮好組件的基本邏輯。(os：思考 1 小時(shí)，碼碼 10 分鐘，程序猿的準(zhǔn)則。)

2. 準(zhǔn)備好組件的數(shù)據(jù)輸入。即分析好邏輯，定好 props 里面的數(shù)據(jù)、類型。

3. 準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯，做好要暴露出來(lái)的方法。

4. 封裝完畢了，直接調(diào)用即可

37.params 和 query 的區(qū)別

答：用法：query 要用 path 來(lái)引入，params 要用 name 來(lái)引入，接收參數(shù)都是類似的，分別是 this.$route.query.name 和 this.$route.params.name。

url 地址顯示：query 更加類似于我們 ajax 中 get 傳參，params 則類似于 post，說(shuō)的再簡(jiǎn)單一點(diǎn)，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示

注意點(diǎn)：query 刷新不會(huì)丟失 query 里面的數(shù)據(jù)

params 刷新 會(huì) 丟失 params 里面的數(shù)據(jù)。

38.vue 初始化頁(yè)面閃動(dòng)問(wèn)題

答：使用 vue 開發(fā)時(shí)，在 vue 初始化之前，由于 div 是不歸 vue 管的，所以我們寫的代碼在還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象，看到類似于 {{message}} 的字樣，雖然一般情況下這個(gè)時(shí)間很短暫，但是我們還是有必要讓解決這個(gè)問(wèn)題的。

首先：在 css 里加上 [v-cloak] {

display: none;

}。

如果沒有徹底解決問(wèn)題，則在根元素加上 style="display: none;" :style="

{display:block}"

39.vue 更新數(shù)組時(shí)觸發(fā)視圖更新的方法

答: push()；pop()；shift()；unshift()；splice()； sort()；reverse()

40.vue 常用的 UI 組件庫(kù)

答：Mint UI，element，VUX

41. Vue的生命周期？

beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed（創(chuàng)建、掛載、更新、卸載）掛載中可以操作DOM，創(chuàng)建中不能操作DOM；常用掛載或者創(chuàng)建生命周期就行了

42.虛擬DOM和DIFF算法？

將DOM抽象為虛擬DOM, 然后通過(guò)新舊虛擬DOM 這兩個(gè)對(duì)象的差異(Diff算法),最終只把變化的部分重新渲染,提高渲染效率的過(guò)程;

diff 是通過(guò)JS層面的計(jì)算，返回一個(gè)patch對(duì)象，即補(bǔ)丁對(duì)象，在通過(guò)特定的操作解析patch對(duì)象，完成頁(yè)面的重新渲染

43.vue2和vue3原理？

1. vue2和vue3雙向數(shù)據(jù)綁定原理發(fā)生了改變

vue2 的雙向數(shù)據(jù)綁定是利用ES5 的一個(gè) API Object.definePropert()對(duì)數(shù)據(jù)進(jìn)行劫持 結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的。

vue3 中使用了 es6 的 ProxyAPI 對(duì)數(shù)據(jù)代理。

相比于vue2.x，使用proxy的優(yōu)勢(shì)如下

defineProperty只能監(jiān)聽某個(gè)屬性，不能對(duì)全對(duì)象監(jiān)聽

可以省去for in、閉包等內(nèi)容來(lái)提升效率（直接綁定整個(gè)對(duì)象即可）

可以監(jiān)聽數(shù)組，不用再去單獨(dú)的對(duì)數(shù)組做特異性操作 vue3.x可以檢測(cè)到數(shù)組內(nèi)部數(shù)據(jù)的變化

2、默認(rèn)進(jìn)行懶觀察（lazy observation）

在 2.x 版本里，不管數(shù)據(jù)多大，都會(huì)在一開始就為其創(chuàng)建觀察者。當(dāng)數(shù)據(jù)很大時(shí)，這可能會(huì)在頁(yè)面載入時(shí)造成明顯的性能壓力。3.x 版本，只會(huì)對(duì)「被用于渲染初始可見部分的數(shù)據(jù)」創(chuàng)建觀察者，而且 3.x 的觀察者更高效。

3、更精準(zhǔn)的變更通知

比例來(lái)說(shuō)：2.x 版本中，使用 Vue.set 來(lái)給對(duì)象新增一個(gè)屬性時(shí)，這個(gè)對(duì)象的所有 watcher 都會(huì)重新運(yùn)行；3.x 版本中，只有依賴那個(gè)屬性的 watcher 才會(huì)重新運(yùn)行。

4、vue3新加入了TypeScript以及PWA的支持

5、vue2和vue3組件發(fā)送改變

44.生命周期鉤子的一些使用方法：

1.beforecreate:可以在加個(gè)loading事件，在加載實(shí)例是觸發(fā)

2.created:初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用

3.mounted:掛載元素，獲取到dom節(jié)點(diǎn)

4.updated:如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)

5.beforeDestroy:可以一個(gè)確認(rèn)停止事件的確認(rèn)框

6.nextTick:更新數(shù)據(jù)后立即操作dom

45.開發(fā)中常用的指令有哪些?

v-model:一般用在表達(dá)輸入，很輕松的實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定

v-html：更新元素的innerHTML

v-show與v-if：條件渲染，注意二者區(qū)別

v-on:click:可以簡(jiǎn)寫為@click,@綁定一個(gè)事件。如果事件觸發(fā)了，就可以指定事件的處理函數(shù)

v-for：基于源數(shù)據(jù)多次渲染元素或模板

v-bind:title=”msg”簡(jiǎn)寫：title="msg"