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

本文目錄一覽：

• 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切換視圖的時(shí)候，由于vue會(huì)主動(dòng)卸載不使用的組件，所以我們不能保存組件之前的狀態(tài)，而我們經(jīng)常能遇到需要保存之前狀態(tài)的需求，例如：搜索頁(yè)（保存搜索記錄），列表頁(yè)（保存之前的瀏覽記錄）等等。

????????????Keep-alive是一個(gè)vue的內(nèi)置組件，它能將不活動(dòng)的組件保存下來(lái)，而不是直接銷毀，當(dāng)我們?cè)俅卧L問(wèn)這個(gè)組件的時(shí)候，會(huì)先從keep-alive中存儲(chǔ)的組件中尋找，如果有緩存的話，直接渲染之前緩存的，如果沒(méi)有的話，再加載對(duì)應(yīng)的組件。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

跨域問(wèn)題來(lái)源于JavaScript的同源策略，即只有 協(xié)議+主機(jī)名+端口號(hào)(如存在)相同，則允許相互訪問(wèn)。為了防止某域名下的接口被其他域名下的網(wǎng)頁(yè)非法調(diào)用，是瀏覽器對(duì)JavaScript施加的安全限制。也就是說(shuō)JavaScript只能訪問(wèn)和操作自己域下的資源，不能訪問(wèn)和操作其他域下的資源?？缬騿?wèn)題是針對(duì)JS和ajax的，html本身沒(méi)有跨域問(wèn)題，比如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請(qǐng)求。因?yàn)閟cript只能發(fā)送get請(qǐng)求需要后臺(tái)配合。此種請(qǐng)求方式應(yīng)該前后端配合，將返回結(jié)果包裝成callback(result)的形式。

? ? ? ?2、 Cors——

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

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

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

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

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

? ??

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

1、什么是MVVM框架？它適用于哪些場(chǎng)景？

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

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

2、active- class是哪個(gè)組件的屬性？

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

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

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

4、如何獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)？

在組件中，使用$router對(duì)象的 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的前端組件庫(kù)。用npm安裝，然后通過(guò) import導(dǎo)入樣式和JavaScript代碼。vue.use(mintUi)用于實(shí)現(xiàn)全局引入， import {Toast} from ' mint-ui'用于在單個(gè)組件局部引入。

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

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

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

綁定事件有兩種方式。

第一種，通過(guò)v-on指令， 。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

具體步驟如下。

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

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

15、請(qǐng)?jiān)敿?xì)說(shuō)明你對(duì)Vue.js生命周期的理解。

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

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

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

16、請(qǐng)描述封裝Vue組件的作用過(guò)程。

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

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

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

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

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

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

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

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

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

20、在Vue.cli中怎樣使用自定義組件？在使用過(guò)程中你遇到過(guò)哪些問(wèn)題？

具體步驟如下。

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

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

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

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

21、談?wù)勀銓?duì)vue.js的 template編譯的理解。

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

詳細(xì)步驟如下。

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

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

22、說(shuō)一下Vue.js中的MVVM模式。

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

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

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

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

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

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

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

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

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

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

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

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

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

27、ref屬性有什么作用？

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

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

28、Vue. js是什么？

Vue. js的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的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可以提升頁(yè)面的渲染性能。

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

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

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

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

32、請(qǐng)說(shuō)明 組件的作用。

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

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

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

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

axios是在vue2.0中用來(lái)替換 vue-resource.js插件的一個(gè)模塊，是一個(gè)請(qǐng)求后臺(tái)的模。

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

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

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

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

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

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

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

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

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

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

代碼如下：

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

1.為什么會(huì)形成跨域？

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

解決方法：安裝插件

Pip install django-cors-headers

2.vuex的工作流程？

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

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

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

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

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

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

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

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

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

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

6.深拷貝與淺拷貝？

假設(shè)B復(fù)制A，修改A的時(shí)候，看B是否變化：B變了是淺拷貝（修改堆內(nèi)存中的同一個(gè)值），沒(méi)變是深拷貝（修改堆內(nèi)存中不同的值）。淺拷貝只是增加了一個(gè)指針指向已存在的內(nèi)存地址，深拷貝是增加了一個(gè)指針并申請(qǐng)了一個(gè)新的內(nèi)存，使這個(gè)增加的指針指向這個(gè)新的內(nèi)存。深拷貝和淺拷貝最根本的區(qū)別在于是否真正獲取一個(gè)對(duì)象的復(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表示需要緩存的頁(yè)面；exclude表示不需要緩存的頁(yè)面。如果兩個(gè)同時(shí)設(shè)置，exclude優(yōu)先級(jí)更 改，則組件不會(huì)被緩存。

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

9.vue傳值方式？

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

10. $on 兄弟組件傳值

$emit 分發(fā)

$on 監(jiān)聽

$off 取消監(jiān)聽

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

在js文件中定義一個(gè)中央事件總線Bus，并暴露出來(lái)

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

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

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

11.組件跨級(jí)傳值

$attrs a-b-c

$listeners 監(jiān)聽

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

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

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

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

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

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

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

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

v-if 是惰性的；v-show 做的僅是簡(jiǎn)單的css切換。

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

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

v-html 反之。

18.v-for key的作用？

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

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

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

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

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

20.vue獲取dom？

ref

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

webpack、vue-router

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

22.什么是vue-router？

vue router 是官方路由管理器。

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

23.vue路由傳參，接收？

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

接：this.$router.query.xxx

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

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

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

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

WEB前端面試題

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

2.1 HTML面試題

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

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

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

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

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

2.2 CSS面試題

面試題：css背景紋路

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

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

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

面試題：用CSS畫一個(gè)三角形

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

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

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

面試題：清除浮動(dòng)有哪些方式？

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

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

面試題：什么是CSS reset？

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

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

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

面試題：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對(duì)象考題

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

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

面試題：slice是干嘛的、splice是否會(huì)改變?cè)瓟?shù)組

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

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

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

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

2.4 真正移動(dòng)端 —— H5/C3面試題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

面試題：閉包 【必須會(huì)】

面試題：原型鏈 【必須會(huì)】

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

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

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

面試題：深拷貝和淺拷貝

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

3.2 ES6面試題

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

面試題：作用域考題

面試題：將下列對(duì)象進(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ū)分初中高級(jí)的 —— Vue面試題

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

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

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

3.$el和$data在哪個(gè)階段有

4.如果使用keep-alive會(huì)多倆個(gè)生命周期

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

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

面試題：談?wù)勀銓?duì)keep-alive的了解

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

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

面試題：ref是什么？

面試題：nextTick是什么？

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

面試題：scoped原理

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

面試題：講一下MVVM

面試題：雙向綁定原理

面試題：什么是虛擬DOM

面試題：key是干什么？

面試題：diff算法

面試題：Vue組件傳值

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

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

面試題：Vuex

面試題：Vue路由

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

4.2 微信小程序面試題

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

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

4.3 uni-app面試題

面試題：生命周期

面試題：條件編譯

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

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