vue前臺(tái)面試題有哪些

這篇文章主要介紹“vue前臺(tái)面試題有哪些”，在日常操作中，相信很多人在vue前臺(tái)面試題有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue前臺(tái)面試題有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1.vue性能優(yōu)化的幾種方案

1.正確的選擇v-if和v-show的使用，v-if有更高的切換消耗，v-show有更高的初始消耗

2.路由懶加載：當(dāng)頁(yè)面很多，組件很多的時(shí)候，SPA頁(yè)面在初次加載的時(shí)候，就會(huì)變的很慢。這是由于vue初次加載的時(shí)候把可能一開(kāi)始看不見(jiàn)的組件也一次加載了，這個(gè)時(shí)候就需要對(duì)頁(yè)面進(jìn)行優(yōu)化，就需要異步組件了。

3.緩存：spa頁(yè)面采用keep-alive緩存組件

4.圖片懶加載：提高頁(yè)面加載速度，不在可視區(qū)域內(nèi)的圖片先不加載，只有滾動(dòng)到可視區(qū)域的時(shí)候才加載。一般借助外部插件如 vue-lazyload。使用只要要npm install vue-lazyload而后頁(yè)面引入即用。

5.SEO優(yōu)化： ssr服務(wù)端渲染

6.打包優(yōu)化：對(duì)于少量過(guò)大的包采取cdn引入文件的方式而不是直接下載到本地。

2.v-show和v-if誰(shuí)的性能更高

v-show本質(zhì)就是通過(guò)控制css中的display設(shè)置為none，控制隱藏，只會(huì)編譯?次；v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)增加或者者刪除DOM元素，若初始值為false，就不會(huì)編譯了。?且v-if不停的銷毀和創(chuàng)立?較消耗性能。所以假如要頻繁切換那么v-show性能更高，假如不是頻繁切換，v-if性能更高

3.vue之間的數(shù)據(jù)傳遞

父到子：props

子到父：$emit自己設(shè)置事件

復(fù)雜組件的傳遞：通過(guò)vuex

4.單文件組件中如何讓樣式只在當(dāng)前組件生效

在組件中的style前面加上scoped

5.vue中的生命周期（鉤子函數(shù)）

共有8+2個(gè)鉤子函數(shù) 基本的有8個(gè)，keep-alive中有2個(gè)

beforeCreate（創(chuàng)立前） / created（創(chuàng)立后） / beforeMount（掛載前） / mounted（掛載后） beforeUpdate（升級(jí)前）/ updated（升級(jí)后） /beforeDestroy（銷毀前）/ destroyed（銷毀后）

其中第一次加載頁(yè)面會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子

另外在keep-alive中，vue新添加了兩個(gè)鉤子函數(shù)

activated：由于使用了keep-alive的組件會(huì)被緩存，所以created,mounted這種的鉤子函數(shù)只會(huì)執(zhí)行一次， 假如我們的子組件需要在每次加載的時(shí)候進(jìn)行某些操作，可以使用activated鉤子觸發(fā)。

deactivated：組件被移除時(shí)使用。

6.vue父子組件生命周期的執(zhí)行順序

加載渲染過(guò)程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子組件升級(jí)過(guò)程

父beforeUpdate->子beforeUpdate->子updated->父updated

父組件升級(jí)過(guò)程

父beforeUpdate->父updated

銷毀過(guò)程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

7.在vue中如何獲取DOM元素

給元素增加ref屬性 通過(guò)this.$refs.domName獲取

8.key的作用

需要使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法即可以正確的識(shí)別此節(jié)點(diǎn)。

作用主要是為了高效的升級(jí)虛擬DOM。

9.$nextTick的使用場(chǎng)景（作用）

由于vue中數(shù)據(jù)升級(jí)是異步的，當(dāng)你修改了data的值而后馬上獲取這個(gè)dom元素的值，是不能獲取到升級(jí)后的值，

你需要使用$nextTick這個(gè)回調(diào)，讓修改后的data值渲染升級(jí)到dom元素之后在獲取，才能成功。

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

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-if，先在計(jì)算屬性中挑選出數(shù)據(jù)，而后在v-for

11.v-model的原理

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()方法。

12.什么是mvvm

MVVM 將數(shù)據(jù)雙向綁定（data-binding）作為核心思想，View 和 Model 之間沒(méi)有聯(lián)絡(luò)，它們通過(guò) ViewModel 這個(gè)橋梁進(jìn)行交互。

Model 和 ViewModel 之間的交互是雙向的，因而 View 的變化會(huì)自動(dòng)同步到 Model，而 Model 變化也會(huì)立即反映到 View 上顯示。

當(dāng)客戶操作 View，ViewModel 感知到變化，而后通知 Model 發(fā)生相應(yīng)改變；反之當(dāng) Model 發(fā)生改變，ViewModel 也能感知到變化，使 View 作出相應(yīng)升級(jí)。

13.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問(wèn)題

將公用的JS庫(kù)通過(guò)script標(biāo)簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度；

在配置 路由時(shí)，頁(yè)面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個(gè)組件時(shí)再加載對(duì)應(yīng)的js文件；

加一個(gè)首屏 loading 圖，提升客戶體驗(yàn)；

14.vue路由的兩種模式，hash與history的區(qū)別

hash —— 即地址欄 URL 中的 # 符號(hào)（此 hash 不是密碼學(xué)里的散列運(yùn)算）。

比方這個(gè) URL：ABC Home Page - ABC.com 的值為 #/hello。它的特點(diǎn)在于：hash 盡管出現(xiàn)在 URL 中，但不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)后臺(tái)完全沒(méi)有影響，因而改變 hash 不會(huì)重新加載頁(yè)面。

history —— 利用了 HTML5 History Interface 中新添加的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）

這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的 功能。只是當(dāng)它們執(zhí)行修改時(shí)，盡管改變了當(dāng)前的 URL，但瀏覽器不會(huì)立即向后臺(tái)發(fā)送請(qǐng)求。

因而可以說(shuō)，hash 模式和 history 模式都屬于瀏覽器自身的特性，Vue-Router 只是利用了這兩個(gè)特性（通過(guò)調(diào)用瀏覽器提供 的接口）來(lái)實(shí)現(xiàn)前臺(tái)路由。

注意！?。istory模式下，前臺(tái)的url必需和實(shí)際向后臺(tái)發(fā)起請(qǐng)求的url 一致，如http://www.abc.com/book/id 。假如后臺(tái)缺少對(duì)/book/id 的路由解決，將返回404錯(cuò)誤。刷新也會(huì)報(bào)404由于會(huì)實(shí)際去請(qǐng)求數(shù)據(jù)。 （需要后臺(tái)進(jìn)行配置。vue官網(wǎng)有詳情）

15.如何處理vuex數(shù)據(jù)刷新丟失的問(wèn)題

由于store里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的,當(dāng)頁(yè)面刷新時(shí)，頁(yè)面會(huì)重新加載vue實(shí)例，store里面的數(shù)據(jù)就會(huì)被重新賦值

如何處理：

一種是state里的數(shù)據(jù)一律是通過(guò)請(qǐng)求來(lái)觸發(fā)action或者mutation來(lái)改變(不推薦，當(dāng)vuex數(shù)據(jù)很多項(xiàng)目很大的時(shí)候不適用)

一種是將state里的數(shù)據(jù)保存一份到本地存儲(chǔ)(localStorage、sessionStorage、cookie）中 （推薦）

16.vue中如何實(shí)現(xiàn)跨域訪問(wèn)

1.開(kāi)發(fā)環(huán)境：配置vue.config.js proxy代理商

2.生產(chǎn)環(huán)境：配置nginx代理商

到此，關(guān)于“vue前臺(tái)面試題有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！