本篇文章給大家談?wù)剋eb前端面試題vue，以及web前端面試題2022對應(yīng)的知識點(diǎn)，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、web前端面試題@二（Keeplive、V-show和v-if的區(qū)別、同源策略及跨域）
• 2、47道基礎(chǔ)的VueJS面試題(附答案)
• 3、史上最全前端vue面試題！推薦收藏
• 4、WEB前端面試題

web前端面試題@二（Keeplive、V-show和v-if的區(qū)別、同源策略及跨域）

????????????在vue中，我們使用component內(nèi)置組件或者vue-router切換視圖的時候，由于vue會主動卸載不使用的組件，所以我們不能保存組件之前的狀態(tài)，而我們經(jīng)常能遇到需要保存之前狀態(tài)的需求，例如：搜索頁（保存搜索記錄），列表頁（保存之前的瀏覽記錄）等等。

????????????Keep-alive是一個vue的內(nèi)置組件，它能將不活動的組件保存下來，而不是直接銷毀，當(dāng)我們再次訪問這個組件的時候，會先從keep-alive中存儲的組件中尋找，如果有緩存的話，直接渲染之前緩存的，如果沒有的話，再加載對應(yīng)的組件。

????????????作為抽象組件，keep-alive是不會直接渲染在DOM中的。

????????Keep-alive提供了三種可選屬性

????????Include-字符串或數(shù)組或正則表達(dá)式。只有名稱匹配的組件被緩存。

????????Exclude -字符串或數(shù)組或正則表達(dá)式。名稱匹配的組件不會被緩存。

????????Max -數(shù)字類型。表示最多可以緩存多少組件實(shí)例。

????????Keep-alive提供了兩個生命鉤子，分別是activated與 deactivated。

????????因為Keep-alive會將組件保存在內(nèi)存中，并不會銷毀以及重新創(chuàng)建，所以不會重新調(diào)用組件的created等方法，需要用activated與deactivated這兩個生命鉤子來得知當(dāng)前組件是否處于活動狀態(tài)。

????????V-show有較高的渲染成本，

????????V-if有較高的切換成本。

????????V-if是真正的條件渲染，確保切換過程中條件內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)谋讳N毀和重建。

????????V-show的元素始終被渲染并保存在dom中，操作的只是display屬性控制演示影藏。

????????源（origin）—— 就是協(xié)議、域名和端口號。若地址里面的協(xié)議、域名和端口號均相同則屬于同源。

????????同源策略——同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會報錯的。

????不受同源策略限制的

????????????1.頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。

????????????2.跨域資源的引入是可以的。但是js不能讀寫加載的內(nèi)容。如嵌入到頁面中的script src="..."/script，img，link，iframe等。

　? ? ?跨域——只要協(xié)議、域名、端口號有一個不同就是跨域。

? ? ? ? 跨域的原因？（只做了解）

跨域問題來源于JavaScript的同源策略，即只有 協(xié)議+主機(jī)名+端口號(如存在)相同，則允許相互訪問。為了防止某域名下的接口被其他域名下的網(wǎng)頁非法調(diào)用，是瀏覽器對JavaScript施加的安全限制。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源?？缬騿栴}是針對JS和ajax的，html本身沒有跨域問題，比如a標(biāo)簽、script標(biāo)簽、甚至form標(biāo)簽（可以直接跨域發(fā)送數(shù)據(jù)并接收數(shù)據(jù)）等。

? ? ? ?1、 Jsonp——

????????????????利用script標(biāo)簽可跨域的特點(diǎn)，在跨域腳本中可以直接回調(diào)當(dāng)前腳本的函數(shù)。jsonp是一種常用的跨域手段，和反向代理，服務(wù)端做跨域處理相比，jsonp更顯得方便輕巧?jsonp的缺點(diǎn)只能發(fā)送get請求。因為script只能發(fā)送get請求需要后臺配合。此種請求方式應(yīng)該前后端配合，將返回結(jié)果包裝成callback(result)的形式。

? ? ? ?2、 Cors——

????????????????服務(wù)器設(shè)置HTTP響應(yīng)頭中Access-Control-Allow-Origin值，解除跨域限制。CORS 是一個W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"（Cross-origin resource sharing），他允許瀏覽器向跨源服務(wù)器發(fā)送XMLHttpRequest請求，從而克服 AJAX 只能同源使用的限制

????????????????缺點(diǎn)是：目前所有最新瀏覽器都支持該功能，但是萬惡的IE不能低于10

Access-Control-Allow-Origin 這個字段是必須的,表示接受那些域名的請求(*為所有)、Access-Control-Allow-Credentials 該字段可選, 表示是否可以發(fā)送cookie、Access-Control-Expose-Headers 該字段可選,XHMHttpRequest對象的方法只能夠拿到六種字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,如果想拿到其他的需要使用該字段指定。

? ? ? ?3、反向代理（Reverse Proxy）{前端獨(dú)立就能解決的跨域方案}——

????指以代理服務(wù)器來接受internet上的連接請求，然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給internet上請求連接的客戶端，此時代理服務(wù)器對外就表現(xiàn)為一個反向代理服務(wù)器。

? ??

47道基礎(chǔ)的VueJS面試題(附答案)

1、什么是MVVM框架？它適用于哪些場景？

MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。

在數(shù)據(jù)操作比較多的場景中，MVVM框架更合適，有助于通過操作數(shù)據(jù)渲染頁面。

2、active- class是哪個組件的屬性？

它是 vue-router模塊的 router-link組件的屬性。

3、如何定義Vue- router的動態(tài)路由？

在靜態(tài)路由名稱前面添加冒號，例如，設(shè)置id動態(tài)路由參數(shù)，為路由對象的path屬性設(shè)置/:id。

4、如何獲取傳過來的動態(tài)參數(shù)？

在組件中，使用$router對象的 params.id，即 $route.params.id 。

5、vue- router有哪幾種導(dǎo)航鉤子？

有3種。

第一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)。作用是跳轉(zhuǎn)前進(jìn)行判斷攔截。

第二種是組件內(nèi)的鉤子。

第三種是單獨(dú)路由獨(dú)享組件。

6、mint-ui是什么？如何使用？

它是基于 Vue.js的前端組件庫。用npm安裝，然后通過 import導(dǎo)入樣式和JavaScript代碼。vue.use(mintUi)用于實(shí)現(xiàn)全局引入， import {Toast} from ' mint-ui'用于在單個組件局部引入。

7、V-model是什么？有什么作用？

v- model是 Vue. js中的一條指令，可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

8、Vue.js中標(biāo)簽如何綁定事件？

綁定事件有兩種方式。

第一種，通過v-on指令， 。

第二種，通過@語法糖， input@ click= doLog()/。

9、vuex是什么？如何使用？在哪種功能場景中使用它？

vuex是針對 Vue. js框架實(shí)現(xiàn)的狀態(tài)管理系統(tǒng)。

為了使用vuex，要引入 store，并注入Vue.js組件中，在組件內(nèi)部即可通過$ ostore訪問 store對象。

使用場景包括：在單頁應(yīng)用中，用于組件之間的通信，例如音樂播放、登錄狀態(tài)管理、加入購物車等。

10、如何實(shí)現(xiàn)自定義指令？它有哪些鉤子函數(shù)？還有哪些鉤子函數(shù)參數(shù)？

自定義指令包括以下兩種。

它有如下鉤子函數(shù)。

鉤子函數(shù)的參數(shù)如下。

11、至少說出vue.js中的4種指令和它們的用法。

相關(guān)指令及其用法如下。

12、Vue-router是什么？它有哪些組件？

它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。

13、導(dǎo)航鉤子有哪些？它們有哪些參數(shù)？

導(dǎo)航鉤子又稱導(dǎo)航守衛(wèi)，又分為全局鉤子、單個路由獨(dú)享鈞子和組件級鈞子。

全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

單個路由獨(dú)享鉤子有 beforeEnter。

組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它們有以下參數(shù)。

14、Vue.js的雙向數(shù)據(jù)綁定原理是什么？

具體步驟如下。

（1）對需要觀察的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，設(shè)置set和get特性方法。當(dāng)給這個對象的某個值賦值時，會觸發(fā)綁定的set特性方法，于是就能監(jiān)聽到數(shù)據(jù)變化。

（4）MVVM是數(shù)據(jù)綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監(jiān)聽自己的 model數(shù)據(jù)變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化通知視圖更新的效果。利用視圖交互，變化更新數(shù)據(jù) model變更的雙向綁定效果。

15、請詳細(xì)說明你對Vue.js生命周期的理解。

總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

當(dāng)使用組件的kep- alive功能時，增加以下兩個周期。

Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當(dāng)捕獲一個來自子孫組件的錯誤時調(diào)用。

16、請描述封裝Vue組件的作用過程。

組件可以提升整個項目的開發(fā)效率，能夠把頁面抽象成多個相對獨(dú)立的模塊，解決了傳統(tǒng)項目開發(fā)中效率低、難維護(hù)、復(fù)用性等問題。

使用Vue.extend方法創(chuàng)建一個組件，使用Vue.component方法注冊組件。子組件需要數(shù)據(jù)，可以在 props中接收數(shù)據(jù)。而子組件修改妤數(shù)據(jù)后，若想把數(shù)據(jù)傳遞給父組件，可以采用emit方法。

17、你是怎樣認(rèn)識vuex的？

vuex可以理解為一種開發(fā)模式或框架。它是對 Vue. js框架數(shù)據(jù)層面的擴(kuò)展。通過狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動組件的變化。應(yīng)用的狀態(tài)集中放在 store中。改變狀態(tài)的方式是提交 mutations，這是個同步的事務(wù)。異步邏輯應(yīng)該封裝在 action中。

18、Vue- loader是什么？它的用途有哪些？

它是解析.vue文件的一個加載器，可以將 template/js/style轉(zhuǎn)換成 JavaScript模塊。

用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應(yīng)用scss或less, template可以添加jade語法等。

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

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

20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？

具體步驟如下。

（1）在 components目錄中新建組件文件，腳本一定要導(dǎo)出暴露的接口。

（2）導(dǎo)入需要用到的頁面（組件）。

（3）將導(dǎo)入的組件注入uejs的子組件的 components屬性中。

（4）在 template的視圖中使用自定義組件。

21、談?wù)勀銓ue.js的 template編譯的理解。

簡而言之，就是首先轉(zhuǎn)化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結(jié)構(gòu)抽象成樹狀表現(xiàn)形式，然后通過 render函數(shù)進(jìn)行渲染，并返回VNode（ Vue. js的虛擬DOM節(jié)點(diǎn)）。

詳細(xì)步驟如下。

（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創(chuàng)建編譯器。另外， compile還負(fù)責(zé)合并 option。

（2）AST會經(jīng)過 generate（將AST轉(zhuǎn)化成 render funtion字符串的過程）得到 render函數(shù)， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節(jié)點(diǎn)，里面有標(biāo)簽名子節(jié)點(diǎn)、文本等。

22、說一下Vue.js中的MVVM模式。

MVVM模式即 Model- View- ViewModel模式。

Vue.js是通過數(shù)據(jù)驅(qū)動的， Vue. js實(shí)例化對象將DOM和數(shù)據(jù)進(jìn)行綁定，一旦綁定，和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，DOM也會隨著變化。

ViewModel是Vue.js的核心，它是 Vue.js的一個實(shí)例。Vue.js會針對某個HTML元素進(jìn)行實(shí)例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。

DOM Listeners和 Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽頁面所有View層中的DOM元素，當(dāng)發(fā)生變化時，Model層的數(shù)據(jù)隨之變化。Data Bindings會監(jiān)聽 Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時，View層的DOM元素也隨之變化。

23、v-show指令和v-if指令的區(qū)別是什么？

v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在于HTML頁面中；而只有當(dāng)v-if的值為true時，元素才會存在于HTML頁面中。v-show指令是通過修改元素的 style屬性值實(shí)現(xiàn)的。

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

在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內(nèi)寫的CSS只對當(dāng)前組件起作用，只需要在Style標(biāo)簽添加Scoped屬性，即 。

25、如何創(chuàng)建vue.js組件？

在vue.js中，組件要先注冊，然后才能使用。具體代碼如下

26、如何實(shí)現(xiàn)路由嵌套？如何進(jìn)行頁面跳轉(zhuǎn)？

路由嵌套會將其他組件渲染到該組件內(nèi)，而不是使整個頁面跳轉(zhuǎn)到 router-view定義組件渲染的位置。要進(jìn)行頁面跳轉(zhuǎn)，就要將頁面渲染到根組件內(nèi)，可做如下配置。

首先，實(shí)例化根組件，在根組件中定義組件渲染容器。然后，掛載路由，當(dāng)切換路由時，將會切換整個頁面。

27、ref屬性有什么作用？

有時候，為了在組件內(nèi)部可以直接訪問組件內(nèi)部的一些元素，可以定義該屬性此時可以在組件內(nèi)部通過this. $refs屬性，更快捷地訪問設(shè)置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。

注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。

28、Vue. js是什么？

Vue. js的目標(biāo)是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定的組件開發(fā)。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

數(shù)據(jù)模型（ Model）發(fā)生改變，視圖（View）監(jiān)聽到變化，也同步改變；視圖（View）發(fā)生改變，數(shù)據(jù)模型（ Model）監(jiān)聽到改變，也同步改變。

使用MVVM模式有幾大好處。

（2）組件化開發(fā)

（3）指令系統(tǒng)

（4）Vue2.0開始支持虛擬DOM。

但在Vue1.0中，操作的是真實(shí)DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。

30、描述vue.js的特點(diǎn)。

Vue. js有以下特點(diǎn)。

31、在vue.js中如何綁定事件？

通過在v-on后跟事件名稱=“事件回調(diào)函數(shù)( )”的語法綁定事件。事件回調(diào)函數(shù)的參數(shù)集合( )可有可無。如果存在參數(shù)集合( )，事件回調(diào)函數(shù)的參數(shù)需要主動傳遞，使用事件對象要傳遞 $event。當(dāng)然，此時也可以傳遞一些其他自定義數(shù)據(jù)。如果沒有參數(shù)集合，此時事件回調(diào)函數(shù)有一個默認(rèn)參數(shù)，就是事件對象。事件回調(diào)函數(shù)要定義在組件的 methods屬性中，作用域是 Vue. js實(shí)例化對象，因此在方法中，可以通過this使用 Vue. js中的數(shù)據(jù)以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=“事件回調(diào)函數(shù)( )”。

32、請說明 組件的作用。

當(dāng) 包裹動態(tài)組件時，會緩存不活動的組件實(shí)例，而不是銷毀它們。

keep-alive是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現(xiàn)在父組件鏈中。

當(dāng)在 內(nèi)切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數(shù)將會執(zhí)行。

33、axios是什么？如何使用它？

axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求后臺的模。

用 npm install axios安裝 axios?；?EMAScript 6 的 EMAScript Module規(guī)范，通過 import關(guān)鍵字將 axios導(dǎo)入，并添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實(shí)例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發(fā)送get或者post請求。在then方法中注冊成功后的回調(diào)函數(shù)，通過箭頭函數(shù)的作用域特征，可以直接訪問組件實(shí)例化對象，存儲返回的數(shù)據(jù)。

34、在 axios中，當(dāng)調(diào)用 axios.post('api/user'）時進(jìn)行的是什么操作？

當(dāng)調(diào)用post方法表示在發(fā)送post異步請求。

35、sass是什么？如何在ue中安裝和使用？

sass是一種CSS預(yù)編譯語言安裝和使用步驟如下。

（1）用npm安裝加載程序（ sass-loader、 css-loader等加載程序)。

（2）在 webpack. config. js中配置sass加載程序。

（3）在組件的 style標(biāo)簽中加上lang屬性，例如lang="scss"。

36、如何在 Vue. js中循環(huán)插入圖片？

對“src”屬性插值將導(dǎo)致404請求錯誤。應(yīng)使用 v-bind:src格式代替。

代碼如下：

史上最全前端vue面試題！推薦收藏

1.為什么會形成跨域？

不是一個源的文件操作另一個源的文件就會形成跨域。當(dāng)請求端的協(xié)議、域名、端口號和服務(wù)器的協(xié)議、域名、端口號有一個不一致就會發(fā)生跨域。

解決方法：安裝插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue組件里面，通過dispatch來出發(fā)actions提交修改數(shù)據(jù)的操作。

② 然后再通過actions的commit來出發(fā)mutations來修改數(shù)據(jù)。

③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)。

④ 最后由store觸發(fā)每一個調(diào)用它的組件更新。

3.vuex是什么？怎么使用？

vuex是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。使用:store,getters,mutations,actions,modules詳細(xì)使用寫法請見：

4.vuex中的數(shù)據(jù)在頁面刷新后數(shù)據(jù)消失怎么解決？

使用sessionStorage或localStorage存儲數(shù)據(jù);也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默認(rèn)行為？

在綁定事件時，在指令后邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認(rèn)行為

6.深拷貝與淺拷貝？

假設(shè)B復(fù)制A，修改A的時候，看B是否變化：B變了是淺拷貝（修改堆內(nèi)存中的同一個值），沒變是深拷貝（修改堆內(nèi)存中不同的值）。淺拷貝只是增加了一個指針指向已存在的內(nèi)存地址，深拷貝是增加了一個指針并申請了一個新的內(nèi)存，使這個增加的指針指向這個新的內(nèi)存。深拷貝和淺拷貝最根本的區(qū)別在于是否真正獲取一個對象的復(fù)制實(shí)體，而不是引用。

7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調(diào)用

8. keep-alive: 組件緩存

router.js中:

meta: {keepAlive:true} // 需要被緩存

鉤子執(zhí)行順序：created - mounted - actived

include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設(shè)置，exclude優(yōu)先級更 改，則組件不會被緩存。

應(yīng)用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數(shù)據(jù)列表，由列表頁面進(jìn)入數(shù)據(jù)詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態(tài)。

9.vue傳值方式？

props $emit() $on() $parent $children $listener $attr

10. $on 兄弟組件傳值

$emit 分發(fā)

$on 監(jiān)聽

$off 取消監(jiān)聽

$once 一次性監(jiān)聽一個事件

在js文件中定義一個中央事件總線Bus，并暴露出來

具體的實(shí)現(xiàn)方式：

使用Bus的時候在接收Bus的組件的beforeDestroy函數(shù)中銷毀Bus，否則會一直疊加調(diào)用這個方法。

應(yīng)用場景：“退出登錄” - ①點(diǎn)擊退出登錄；②修改密碼后自動退出登錄

11.組件跨級傳值

$attrs a-b-c

$listeners 監(jiān)聽

12.vue事件修飾符有哪些？

.stop .prevent .self .once .passive .sync

13.箭頭函數(shù)中的this？

不具有this綁定，但函數(shù)體可以使用this，這個this指向的是箭頭函數(shù)當(dāng)前所處的詞法環(huán)境中的this對象。

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

如果不是函數(shù)的話，每個組件的data都是內(nèi)存的同一個地址，一個數(shù)據(jù)改變了其他也改變了，當(dāng)他是一個函數(shù)時，每個組件實(shí)例都有自己的作用域，每個實(shí)例相互獨(dú)立，就不會互相影響。

16.v-if 和 v-show區(qū)別？

v-if 是對標(biāo)簽的創(chuàng)建與銷毀， v-show 則僅在初始化時加載一次，v-if 開銷相對來說比v-show 大；

v-if 是惰性的；v-show 做的僅是簡單的css切換。

17.v-text 與 v-html區(qū)別？

v-text 用于普通文本，不能解析html；

v-html 反之。

18.v-for key的作用？

使用v-for更新渲染過的數(shù)據(jù)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項的順序改變，vue將不是移動DOM元素來匹配數(shù)據(jù)項的改變，而是簡單地復(fù)用此處每個元素，并確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。

key的特殊屬性主要用在虛擬DOM算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法，它會基于key的變化重新排列元素順序。

19.Scss是什么？在vue-cli中安裝步驟？有哪幾大特性？

npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴(kuò)展中下載;

特性：可以用變量，可以用混合器，可以嵌套等。

20.vue獲取dom？

ref

21.vue初始化頁面閃動問題？

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22.什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模塊化 基于組件路由配置，路由參數(shù)、查詢、通配符，細(xì)粒度導(dǎo)航控制，自定義的滾動條行為等。

23.vue路由傳參，接收？

傳： this.$router.push({path:'', query(params):{}})

接：this.$router.query.xxx

24.防抖和節(jié)流？

節(jié)流是一定時間內(nèi)執(zhí)行一次函數(shù)，多用在scroll事件上；

防抖是在一定時間內(nèi)執(zhí)行最后一次的函數(shù)，多用在input輸入操作，表單提交等。

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

WEB前端面試題

第二章 面試題基礎(chǔ)篇

2.1 HTML面試題

面試題：行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

面試題：頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

面試題：title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

面試題：img標(biāo)簽的title和alt有什么區(qū)別？

面試題：png、jpg、gif 這些圖片格式解釋一下，分別什么時候用？

2.2 CSS面試題

面試題：css背景紋路

面試題：介紹一下CSS的盒子模型

面試題：CSS選擇符有哪些？哪些屬性可以繼承？

面試題：CSS優(yōu)先級算法如何計算？

面試題：用CSS畫一個三角形

面試題：一個盒子不給寬度和高度如何水平垂直居中？

面試題：display有哪些值？說明他們的作用。

面試題：對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？

面試題：清除浮動有哪些方式？

面試題：在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應(yīng)寬，要求先加載中間塊，請寫出結(jié)構(gòu)及樣式。

面試題：什么是CSS reset？

面試題：css sprite是什么,有什么優(yōu)缺點(diǎn)

面試題：display: none;與visibility: hidden;的區(qū)別

面試題：position有哪些值?有什么作用? 【特別多公司問】

面試題：line-height和height有什么區(qū)別？

面試題：opacity 和 rgba區(qū)別

2.3 JavaScript基礎(chǔ)面試題

面試題：延遲加載JS有哪些方式？

面試題：JS數(shù)據(jù)類型有哪些？

面試題：null和undefined的區(qū)別

面試題：JS數(shù)據(jù)類型考題

面試題：==和===有什么不同

面試題：JS微任務(wù)和宏任務(wù)

面試題：JS作用域考題

面試題：JS對象考題

面試題：JS作用域+this指向+原型 考題

面試題：JS判斷變量是不是數(shù)組，你能寫出哪些方法？

面試題：slice是干嘛的、splice是否會改變原數(shù)組

面試題：JS數(shù)組去重

面試題：找出多維數(shù)組最大值

面試題：給字符串新增方法實(shí)現(xiàn)功能

面試題：找出字符串出現(xiàn)最多次數(shù)的字符以及次數(shù)

2.4 真正移動端 —— H5/C3面試題

面試題：什么是語義化標(biāo)簽

面試題：::before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個偽元素的作用。

面試題：如何關(guān)閉iOS鍵盤首字母自動大寫

面試題：怎么讓Chrome支持小于12px 的文字？

面試題：rem和em有什么樣區(qū)別

面試題：ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉

面試題：webkit表單輸入框placeholder的顏色值能改變嗎？

面試題：禁止ios 長按時不觸發(fā)系統(tǒng)的菜單，禁止iosandroid長按時下載圖片

面試題：禁止ios和android用戶選中文字

面試題：自適應(yīng) [淘寶無線適配]

面試題：響應(yīng)式

第三章 面試題進(jìn)階篇

3.1 JavaScript進(jìn)階面試題

面試題：new操作符具體做了什么

面試題：閉包 【必須會】

面試題：原型鏈 【必須會】

面試題： JS繼承有哪些方式

面試題：說一下call、apply、bind區(qū)別

面試題：sort背后原理是什么？

面試題：深拷貝和淺拷貝

面試題：localstorage、sessionstorage、cookie的區(qū)別

3.2 ES6面試題

面試題：var、let、const區(qū)別

面試題：作用域考題

面試題：將下列對象進(jìn)行合并

面試題：箭頭函數(shù)和普通函數(shù)有什么區(qū)別？

面試題：Promise有幾種狀態(tài)

面試題：find和filter的區(qū)別 【大廠】

面試題：some和every的區(qū)別 【大廠】

3.3 webpack面試題

面試題：webpack插件

3.4 Git面試題

面試題：git常用命令

面試題：解決沖突

面試題：GitFlow

第四章 面試題框架篇

4.1 區(qū)分初中高級的 —— Vue面試題

面試題：Vue2.x 生命周期有哪些？

1.系統(tǒng)自帶八個

2.當(dāng)一旦進(jìn)入到某個組件會執(zhí)行哪些生命周期

3.$el和$data在哪個階段有

4.如果使用keep-alive會多倆個生命周期

5.如果加入keep-alive第一次進(jìn)入組件會執(zhí)行哪些生命周期

6.如果加入keep-alive第二次或者第N進(jìn)入該組件會執(zhí)行哪些生命周期

面試題：談?wù)勀銓eep-alive的了解

面試題：v-if和v-show區(qū)別

面試題：v-if和v-for優(yōu)先級 2.x

面試題：ref是什么？

面試題：nextTick是什么？

面試題：Vue中如何做樣式穿透

面試題：scoped原理

面試題：Vuex是單向數(shù)據(jù)流還是雙向數(shù)據(jù)流？

面試題：講一下MVVM

面試題：雙向綁定原理

面試題：什么是虛擬DOM

面試題：key是干什么？

面試題：diff算法

面試題：Vue組件傳值

面試題：props和data優(yōu)先級誰高？

面試題：computed、methods、watch有什么區(qū)別？

面試題：Vuex

面試題：Vue路由

面試題：Vue項目打包后出現(xiàn)空白頁

4.2 微信小程序面試題

面試題：如何自定義頭部？

面試題：如何自定義底部？

4.3 uni-app面試題

面試題：生命周期

面試題：條件編譯

第五章 面試題性能優(yōu)化篇

web前端面試題vue的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于web前端面試題2022、web前端面試題vue的信息別忘了在本站進(jìn)行查找喔。