今天給各位分享vue前端面試問(wèn)題的知識(shí)，其中也會(huì)對(duì)vue前端面試題2020進(jìn)行解釋?zhuān)绻芘銮山鉀Q你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、vue面試題大全
• 2、前端Vue面試必過(guò)題 優(yōu)選(鉤子函數(shù))
• 3、前端工程師必問(wèn)面試題？vue路由模式？路由守衛(wèi)？
• 4、你遇到的前端面試題都有什么？

vue面試題大全

1. vue生命周期都有哪些？

2. 進(jìn)入頁(yè)面會(huì)執(zhí)行哪些生命周期函數(shù)

beforeCreate、created、beforeMounted、mounted

3. 在哪里可以訪問(wèn) data

beforeCreate中不可以訪問(wèn)

created中有 el

beforeMounte中有 el

mouted中都有，包括之后的生命周期鉤子函數(shù)都有

4、 如果加入了keep-alive會(huì)增加兩個(gè)生命周期函數(shù)

activated和deactivated

進(jìn)入頁(yè)面的時(shí)候觸發(fā)activated，離開(kāi)頁(yè)面觸發(fā) deactivated

5. 如果加入keep-alive組件，第一次進(jìn)入頁(yè)面會(huì)觸發(fā)哪些生命周期

beforeCreate、created、beforeMounted、mounted、activated

6、 如果加入了keep-alive組件后，第二次或第n次進(jìn)入頁(yè)面會(huì)觸發(fā)哪些生命周期？

只觸發(fā)一個(gè)生命周期：activated(因?yàn)樵擁?yè)面已經(jīng)被緩存起來(lái)了)

1.是什么

vue自帶的一個(gè)組件，用來(lái)緩存組件，提升性能，keep-alive可以在組件切換時(shí)，保存其包裹組件的狀態(tài)，使其不被銷(xiāo)毀。

2、參數(shù)

include：表示只有匹配的組件才會(huì)被緩存；

exclude：表示匹配到的組件不會(huì)被緩存；

3、生命周期

有兩個(gè)生命周期函數(shù)，同上

4.使用場(chǎng)景

-列表頁(yè)面跳轉(zhuǎn)詳情頁(yè)的時(shí)候，用戶通過(guò)點(diǎn)擊跳轉(zhuǎn)，那么詳情頁(yè)每次都要去請(qǐng)求數(shù)據(jù)，如果用戶每次點(diǎn)擊的都是同一個(gè)，那么詳情頁(yè)就沒(méi)必要去重新請(qǐng)求，直接緩存起來(lái)就行了，如果點(diǎn)擊的不是同一個(gè)再重新發(fā)起請(qǐng)求；

-在router-view上使用可以緩存路由組件；

1.相同點(diǎn)

都可以控制元素的顯示隱藏

2.區(qū)別

v-if通過(guò)創(chuàng)建/銷(xiāo)毀dom元素來(lái)控制元素的顯示隱藏，v-show通過(guò)css屬性的display:none來(lái)控制元素的顯示隱藏

3.場(chǎng)景

頻繁切換使用v-show，會(huì)節(jié)省性能，反之使用v-if

1、當(dāng)項(xiàng)目使用keep-alive時(shí)，可搭配組件name進(jìn)行緩存過(guò)濾

當(dāng)我們使用keep-alive緩存組件時(shí)，被緩存組件中的mounted函數(shù)只會(huì)執(zhí)行一次，第二次進(jìn)入頁(yè)面不會(huì)重新觸發(fā)，有兩種解決方法，一種是使用activated()，在里面進(jìn)行mounted中的操作；另一種就是在keep-alive中增加一個(gè)過(guò)濾，如下所示：

exclude屬性就是要忽略匹配到的組件。

2、DOM做遞歸組件時(shí)；

當(dāng)組件需要自己調(diào)用自己的時(shí)候

3、使用vue-tools時(shí)；

vue-devtools調(diào)試工具里顯示的組件名稱(chēng)是由vue中組件name決定的

v-for的優(yōu)先級(jí)比v-if的優(yōu)先級(jí)高，這是在源碼中規(guī)定好的，并且v-for和v-if不可以同時(shí)使用，同時(shí)使用會(huì)很浪費(fèi)性能，比如明知判斷條件是false的情況下，還需要去遍歷一下數(shù)據(jù)，所以通常我們會(huì)把v-if放在v-for的外面。

是用來(lái)獲取更新后的dom內(nèi)容，并且該方法是異步的

作用是將回調(diào)函數(shù)延遲到下次dom更新循環(huán)之后執(zhí)行因?yàn)関ue更新數(shù)據(jù)是異步的，修改data中的數(shù)據(jù)，視圖不會(huì)立刻更新，vue會(huì)將你對(duì)data的修改放到一個(gè)watch隊(duì)列中，當(dāng)同一事件循環(huán)中的所有數(shù)據(jù)更新完以后，再進(jìn)行試圖更新，所以會(huì)產(chǎn)生延遲。

最常見(jiàn)的使用場(chǎng)景就是，在created中獲取dom元素的時(shí)候需要使用$nextTick獲取

組件中的 data 寫(xiě)成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值形式定義，這樣每復(fù)用一次組件，就會(huì)返回一份新的 data ，相當(dāng)于給每個(gè)組件實(shí)例創(chuàng)建一個(gè)私有的數(shù)據(jù)空間，讓各個(gè)組件實(shí)例維護(hù)各自的數(shù)據(jù)。而單純的寫(xiě)成對(duì)象形式，就使得所有組件實(shí)例共用了一份 data ，就會(huì)造成一個(gè)變了全都會(huì)變的結(jié)果。

當(dāng)父組件給子組件傳遞數(shù)據(jù)的時(shí)候，子組件只允許對(duì)數(shù)據(jù)進(jìn)行讀取，不允許修改數(shù)據(jù)，因?yàn)楫?dāng)子組件修改了父組件傳過(guò)來(lái)的數(shù)據(jù)時(shí)，其他引用父組件數(shù)據(jù)的組件也會(huì)被修改，從而導(dǎo)致報(bào)錯(cuò)，然而也不知道是當(dāng)前組件報(bào)錯(cuò)還是父組件報(bào)錯(cuò)還是修改父組件信息的子組件的錯(cuò)誤；

如果要修改可以通過(guò)this.$emit方法派發(fā)自定義事件，在父組件中修改；

hash模式和history模式，默認(rèn)是hash模式

區(qū)別如下：

1、表現(xiàn)形式不同，hash使用#表示，history用/表示；

2、hash值不會(huì)發(fā)送到服務(wù)端，history會(huì)發(fā)送到服務(wù)端 ，如果沒(méi)有匹配到對(duì)應(yīng)的路由，需要配置對(duì)應(yīng)的頁(yè)面；

3、獲取方式不同，hash值可以通過(guò)location.path獲取，history通過(guò)location.pathname獲??；

4、hash可以通過(guò)window.onhashchange監(jiān)聽(tīng)hash值的改變 ，history

可以通過(guò)onpopstate監(jiān)聽(tīng)變化；

組建中的template標(biāo)簽會(huì)編譯為render函數(shù)，通過(guò)render函數(shù)創(chuàng)建出dom元素，然后轉(zhuǎn)化為虛擬dom最終轉(zhuǎn)化為真實(shí)dom

1、虛擬dom是一個(gè)js對(duì)象，用對(duì)象屬性來(lái)描述節(jié)點(diǎn)，是一層對(duì)真實(shí)dom的抽象

2、因?yàn)閐om的執(zhí)行速度遠(yuǎn)不如js執(zhí)行速度快，因此將真實(shí)的dom抽象成js對(duì)象，然后通過(guò)算法計(jì)算出真正需要更新的節(jié)點(diǎn)，從而減少了大量的dom操作。

3、將直接操作dom轉(zhuǎn)換成了兩個(gè)js對(duì)象中去比較，找出差異項(xiàng)，做局部更新，提高了執(zhí)行效率。

未完待續(xù)...

前端Vue面試必過(guò)題 優(yōu)選(鉤子函數(shù))

①自定義指令是什么？以及自定義指令的使用場(chǎng)景

? ??在Vue中，有很多內(nèi)置指令，但是這些指令只能滿足我們最基礎(chǔ)的使用，當(dāng)我們?cè)趯?shí)際項(xiàng)目中遇到了必須要對(duì)DOM進(jìn)行操作的邏輯時(shí)，我們就用到了自定義指令

②自定義指令的鉤子函數(shù)

????bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

????inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用?

????update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新。

????componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

????unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

????在父組件給子組件傳值的時(shí)候，給子組件加一個(gè)判斷，如果數(shù)據(jù)沒(méi)有請(qǐng)求到就不渲染當(dāng)前組件

? ??vue-router傳參兩種方式：params和query

方法一：

? ??query 方式傳參和接收參數(shù)

?????傳參：

???? 接收參數(shù)：

?????? this.$route.query.id

? ??傳參是this.$router,接收參數(shù)是this.$route

兩者區(qū)別：

??????? $router為VueRouter實(shí)例，想要導(dǎo)航到不同URL，則使用$router.push方法

??????? $route為當(dāng)前router跳轉(zhuǎn)對(duì)象，里面可以獲取name、path、query、params等

方法二：

? ???params方式傳參和接收參數(shù)

??? 傳參：

接收參數(shù):?this.$route.params.id

query和oarams的區(qū)別：

????query相當(dāng)于get請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)，而params相當(dāng)于post請(qǐng)求，參數(shù)不會(huì)再地址欄中顯示

? ? 全局導(dǎo)航鉤子：beforeEach、afterEach

? ? 組件內(nèi)導(dǎo)航：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

? ? 獨(dú)享導(dǎo)航守衛(wèi)：beforeEnter

前端工程師必問(wèn)面試題？vue路由模式？路由守衛(wèi)？

vue的路由模式一共有兩種，分別是哈希和history，他們的區(qū)別是hash模式不會(huì)包含在http請(qǐng)求當(dāng)中，并且hash不會(huì)重新加載頁(yè)面，而使用history模式的話，如果前端的url和后端發(fā)起請(qǐng)求的url不一致的話，會(huì)報(bào)404錯(cuò)誤，所以history的原理是利用html5新增的兩個(gè)特性方法，分別是psuhState和replaceState來(lái)完成的，以上就是對(duì)vue路由的理解。

路由的導(dǎo)航守衛(wèi) 又叫做路由的鉤子函數(shù)（生命周期函數(shù)）

就是在跳轉(zhuǎn)頁(yè)面的時(shí)候把路由欄下來(lái)，做一些操作在放行，vue一共提供了三種路由守衛(wèi)。

第一種是全局守衛(wèi)

beforeEach路由進(jìn)入之前

afterEach路由進(jìn)入之后

第二種 組件內(nèi)守衛(wèi)

beforeRouteEnter 路由進(jìn)入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由離開(kāi)之前

第三種 路由獨(dú)享守衛(wèi)

beforeEnter 路由進(jìn)入之前

分別是 to from next

next 這個(gè)參數(shù) 在路由3.x版本的時(shí)候，是必須的

但是到了路由4.x版本的時(shí)候next參數(shù)變成可選的了

一般來(lái)說(shuō)vue2搭配 3.x的路由

vue3搭配 4.x 的路由

比如說(shuō)購(gòu)物車(chē)頁(yè)面只有登陸的才能訪問(wèn)，我們可以用組件級(jí)守衛(wèi)購(gòu)物車(chē)頁(yè)面，如果已經(jīng)登陸存有token 的話，就繼續(xù)訪問(wèn)這個(gè)頁(yè)面，如果沒(méi)有登陸的話就會(huì)跳轉(zhuǎn)到登陸頁(yè)面。

在項(xiàng)?中我們經(jīng)常使?路由守衛(wèi)實(shí)現(xiàn)??的鑒權(quán). ?如:當(dāng)?戶登錄之后,我們會(huì)把后臺(tái)返回的token以及?戶信息保存到vuex

和本地,當(dāng)??進(jìn)?跳轉(zhuǎn)的時(shí)候,我們會(huì)在路由守衛(wèi)??獲取vuex??的token,如果token存在的話,我們則使?next讓他進(jìn)?要

跳轉(zhuǎn)的??,如果token不存在的話我們使?next?法讓他回到登錄?

以上就是我對(duì)vue路由守衛(wèi)的理解。

?先v-if和v-show都是控制元素的顯示與隱藏, 不過(guò)v-if控制元素的顯

示和隱藏的時(shí)候會(huì)刪除對(duì)?的dom元素,當(dāng)每?個(gè)顯示的時(shí)候,都會(huì)重新創(chuàng)建dom和渲染. ?v-show則是通過(guò)css的display:none

和display:block來(lái)控制元素的顯示與隱藏. v-if?較耗費(fèi)性能,所以我們涉及到頻繁的顯示隱藏操作我們建議使?v-show,如果不

是頻繁操作的話,我們可以v-if

在項(xiàng)?中我會(huì)經(jīng)常使?v-if和v-show,?如我們?cè)谒阉鞴δ艿臅r(shí)候,他有?個(gè)歷史記錄,這個(gè)時(shí)候我們根據(jù)是否有搜索的結(jié)果來(lái)判

斷歷史記錄的顯示與隱藏,這塊我就可以使?v-if ,當(dāng)然?v-show也可以. 以上就是我對(duì)v-if和v-show的理解。

v-for的優(yōu)先級(jí)?. 因?yàn)関-for的時(shí)候我們才開(kāi)始渲染dom元素,這個(gè)v-if還?法進(jìn)?判斷.

v-for和v-if不能同時(shí)使?,我們可以通過(guò)標(biāo)簽,?如div或者template標(biāo)簽來(lái)進(jìn)?包裹,把v-if寫(xiě)到包裹的標(biāo)簽上?(寫(xiě)到v-for外?)。

?先呢,methods是?來(lái)定義?法的區(qū)域,methods定義的?法需要調(diào)?才能觸發(fā). 不具備緩存?

?computed是計(jì)算屬性,他依賴(lài)于屬性值的變化,當(dāng)屬性發(fā)?改變的時(shí)候,計(jì)算屬性??定義的?法就會(huì)觸發(fā),computed具有緩

存性,依賴(lài)屬性值的變化?變化.

?watch主要是?于監(jiān)聽(tīng),不具備被緩存性.依賴(lài)于數(shù)據(jù)變化?觸發(fā).

在項(xiàng)?中,?如我們獲取state的狀態(tài)的時(shí)候我們會(huì)把它放到computed??,或者在寫(xiě)購(gòu)物?數(shù)量計(jì)算的時(shí)候也會(huì)使?計(jì)算屬性.

?watch也在項(xiàng)?經(jīng)常使?,?如我們封裝編輯 和 新增彈窗組件的時(shí)候會(huì)通過(guò)watch來(lái)進(jìn)?id判斷我們要顯否要清空表單的數(shù)

據(jù).

以上就是我對(duì)computed和watch的理解。

你遇到的前端面試題都有什么？

大家好，我是王我。

隨著春節(jié)的結(jié)束，各個(gè)行業(yè)也普遍開(kāi)始了上班的節(jié)奏， 不過(guò)本人17號(hào)才上班。為什么？因?yàn)殚L(zhǎng)得帥的都上班比較晚。 當(dāng)然，每到新年結(jié)束，又迎來(lái)了一批招聘者與面試者，我來(lái)說(shuō)說(shuō)作為一年工作經(jīng)驗(yàn)應(yīng)該知道的面試題。

HTML篇

1.doctype是什么？有哪些類(lèi)型？

2.input有哪些新類(lèi)型？簡(jiǎn)要說(shuō)明其8用法。

3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分HTML和HTML5？

4.bootstrap響應(yīng)式的原理是什么？

5.多移動(dòng)終端頁(yè)面適配是如何實(shí)現(xiàn)的？

CSS篇

1.如何實(shí)現(xiàn)兩列布局，左邊自適應(yīng)，右邊固定寬度？

2.用CSS畫(huà)一個(gè)三角形

3.CSS實(shí)現(xiàn)字體大寫(xiě)

4.display有哪些常用的屬性值？分別是什么意思？

5.position為absolute，relative，fixed的定點(diǎn)位置

6.用三種方法清除浮動(dòng)

7.請(qǐng)介紹一下margin塌陷問(wèn)題

js篇

1.什么是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實(shí)現(xiàn))

2.js創(chuàng)建對(duì)象，至少使用三種方法

3.簡(jiǎn)述一下事件穿透以及解決辦法

4.用三種方式判斷變量類(lèi)型是否是數(shù)組

5.如何實(shí)現(xiàn)對(duì)象的拷貝？

6.什么是閉包？閉包的優(yōu)缺點(diǎn)。

7.簡(jiǎn)述一下ajax請(qǐng)求的過(guò)程。

8.簡(jiǎn)述一下new一個(gè)人構(gòu)造函數(shù)的人過(guò)程。

9.為什么會(huì)有跨域？是怎么解決跨域問(wèn)題的？簡(jiǎn)述一下原理。

10.js原始數(shù)據(jù)類(lèi)型有哪些？

11.學(xué)一個(gè)函數(shù)，判斷一個(gè)變量是否是字符串

12.typeof有哪些結(jié)果？

13.剪頭函數(shù)和普通函數(shù)有什么區(qū)別？

14.請(qǐng)用三種方法實(shí)現(xiàn)數(shù)組去重

15.href和src有什么區(qū)別？

jquery篇

1.attr()和prop()有什么區(qū)別？

2.on和bind有什么區(qū)別？js動(dòng)態(tài)添加的dom元素是通過(guò)on還是bind？

3.touch和click有什么區(qū)別？

4.window.onload和jquery的ready有什么區(qū)別？

vue篇

1.簡(jiǎn)述一下vue的生命周期及其特點(diǎn)

2.vue雙向綁定的原理是什么？

3.vue的特點(diǎn)有哪些？和jquery有什么區(qū)別？

4.父子組件之間傳遞數(shù)據(jù)的方法

5.子組件如何共享數(shù)據(jù)？

6.一般有什么工具進(jìn)行數(shù)據(jù)交互？

7.webpack的原理是什么？

8.簡(jiǎn)述一下$nextTick的用法

瀏覽器篇

1.cookie、sessionStorage、localStorage的區(qū)別是什么？

2.有用過(guò)瀏覽器緩存嗎？簡(jiǎn)述一下基本的緩存機(jī)制

網(wǎng)絡(luò)篇

1.http和https之間的區(qū)別

2.從服務(wù)器的安全考慮，是使用get請(qǐng)求還是post請(qǐng)求？

3.URL請(qǐng)求的過(guò)程有哪些？

項(xiàng)目經(jīng)驗(yàn)篇

1.項(xiàng)目中遇到的最大挑戰(zhàn)以及解決辦法

2.常見(jiàn)的網(wǎng)頁(yè)優(yōu)化有哪些？

作為一個(gè)面試一年以內(nèi)工作經(jīng)驗(yàn)的前端程序員來(lái)說(shuō)，以上的問(wèn)題能夠倒答如流月薪6k應(yīng)該不成問(wèn)題啦。這些面試題也是我在很多面試中感覺(jué)經(jīng)常被問(wèn)到的題目。

希望大家年后找工作能夠順順利利， 千萬(wàn)不要跟我一樣哦，只有帥氣就一無(wú)所有了。

大家好，我是王我，中國(guó)最帥的前端程序員。

前幾次都是各種培訓(xùn)公司，各種忽悠就不提了，說(shuō)說(shuō)后面4次面試的經(jīng)歷。

第一次是面一個(gè)小公司，不過(guò)他們好像沒(méi)有厲害的前端，來(lái)面我的是個(gè)后端，一來(lái)沒(méi)有問(wèn)我關(guān)于js的知識(shí)，直接問(wèn)我以前做過(guò)什么，有沒(méi)有經(jīng)驗(yàn)，我本人不會(huì)吹牛，簡(jiǎn)歷也沒(méi)怎么包裝，就是自己把自學(xué)的知識(shí)和做的幾個(gè)小demo弄在上面，也用github掛在頁(yè)面上了，不過(guò)他根本不點(diǎn)開(kāi)看，也不問(wèn)，問(wèn)我會(huì)不會(huì)vue，我當(dāng)時(shí)對(duì)框架還不了解，他就說(shuō)他們需要能直接上手開(kāi)始寫(xiě)的，所以我第一個(gè)就直接掛了。

第二次面試是一個(gè)國(guó)企，這個(gè)問(wèn)了很多問(wèn)題，都很基礎(chǔ)，js數(shù)據(jù)類(lèi)型，數(shù)組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然后因?yàn)樗麄冎饕胘q，所以問(wèn)了很多jq的操作，關(guān)于節(jié)點(diǎn)的，動(dòng)畫(huà)的，我看鋒利的jq大概看了3遍，也練過(guò)多次，所以我答的很熟。然后問(wèn)了些布局方面的，bootstrap我了解過(guò)，又看過(guò)css3，所以這方面也沒(méi)啥問(wèn)題，最后在現(xiàn)場(chǎng)做了個(gè)題目，主要就是布局然后通過(guò)ajax呈現(xiàn)數(shù)據(jù)。后面聽(tīng)介紹我面試的說(shuō)面試官比較滿意，說(shuō)我jq很熟，一面就過(guò)了?？上Ш竺骐娫捗嬖嚥恢趺椿厥驴赡鼙憩F(xiàn)的不夠自信，雖然沒(méi)問(wèn)技術(shù)，但是我沒(méi)啥自信，把沒(méi)項(xiàng)目經(jīng)驗(yàn)什么的也不知怎么就一五一十交代了，估計(jì)因?yàn)檫@個(gè)掛掉了。

第三次沒(méi)問(wèn)問(wèn)題，直接就是一套題開(kāi)做，我在那做了一個(gè)多小時(shí)。題目就是按照要求一步一步做一個(gè)頁(yè)面出來(lái)，我也搞忘了我當(dāng)時(shí)卡在哪個(gè)地方了，坐在那得時(shí)候就是做不出來(lái)，沒(méi)有設(shè)計(jì)圖，要根據(jù)他的描述自己找個(gè)設(shè)計(jì)圖然后做，我第一次遇到這個(gè)有點(diǎn)懵，雖然當(dāng)時(shí)沒(méi)做出來(lái)，不過(guò)回來(lái)我自己花了幾個(gè)小時(shí)把它做了。所以這個(gè)也是涼了。

第四個(gè)問(wèn)的比較多，數(shù)據(jù)類(lèi)型，數(shù)組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問(wèn)的js。然后問(wèn)了html5的新特性 css3 的新特性，遇到過(guò)什么瀏覽器的兼容性問(wèn)題，怎么解決的，以后想往什么方面發(fā)展。這個(gè)時(shí)候我已經(jīng)會(huì)點(diǎn)vue了，照著做了個(gè)小demo，不過(guò)后來(lái)知道公司用的angularjs，面試官也沒(méi)看我做的，問(wèn)也沒(méi)問(wèn)。。以前聽(tīng)網(wǎng)上說(shuō)要帶上自己的項(xiàng)目去面試感覺(jué)沒(méi)起多大效果。

最后總結(jié)下如果面的比較初級(jí)的崗位，應(yīng)該主要問(wèn)js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然后js的基礎(chǔ)知識(shí)，對(duì)了還有apply和call也問(wèn)了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點(diǎn)的，暫時(shí)還沒(méi)面過(guò)，等以后面過(guò)在來(lái)回答

1. cookie session 的用途和區(qū)別，以及有效期

1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

考慮到安全應(yīng)當(dāng)使用session。

3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多，會(huì)比較占用你服務(wù)器的性能

考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。

4、單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。

2. vue的數(shù)據(jù)綁定原理，mvvm與mvc的區(qū)別

MVVM：

m:model數(shù)據(jù)模型層 v:view視圖層 vm:ViewModel

vue中采用的是mvvm模式，這是從mvc衍生過(guò)來(lái)的

MVVM讓視圖與viewmodel直接的關(guān)系特別的緊密，就是為了解決mvc反饋不及時(shí)的問(wèn)題

圖片說(shuō)明一下：

說(shuō)到MVVM就要說(shuō)一下雙向綁定和數(shù)據(jù)劫持的原理，

MVC：

m:model數(shù)據(jù)模型層 v:view視圖層 c:controller控制器

原理： c層需要控制model層的數(shù)據(jù)在view層進(jìn)行顯示

MVC兩種方式，圖片說(shuō)明：

總結(jié)：

mvvm與mvc最大的區(qū)別：

MVVM實(shí)現(xiàn)了view與model的自動(dòng)同步，也就是model屬性改變的時(shí)候， 我們不需要再自己手動(dòng)操作dom元素去改變view的顯示，而是改變屬性后該屬性對(duì)應(yīng)的view層會(huì)自動(dòng)改變。

不懂得可以復(fù)制鏈接查看：

3. storage 的區(qū)別 sessionStorage localStorage

localStorage 的生命周期是永久性的。假若使用localStorage存儲(chǔ)數(shù)據(jù)，即使關(guān)閉瀏覽器，也不會(huì)讓數(shù)據(jù)消失，除非主動(dòng)的去刪除數(shù)據(jù)，使用的方法如上所示。localStorage有l(wèi)ength屬性

sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說(shuō)，在整個(gè)瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。sessionStorage也有l(wèi)ength屬性，其基本的判斷和使用方法和localStorage的使用是一致的

4.v-model雙向數(shù)據(jù)原理

有一個(gè)文本框 通過(guò)v-bind綁定了value屬性 值為myname 是我們?cè)趘ue實(shí)例中定義的屬性

傳統(tǒng)我們獲取文本框值方法 可能通過(guò)getElementById找到文本框 然后獲取其value屬性

但是vue中直接通過(guò)v-bind綁定了value屬性 所以不需要像之前那樣獲取值

所以在后面的按鈕中獲取name值 直接獲取vue實(shí)例對(duì)象data里面的myname屬性即可

【數(shù)據(jù)為尊 ----數(shù)據(jù)映射到瀏覽器 如果數(shù)據(jù)v-model后修改（肯定input）然后到數(shù)據(jù)在有數(shù)據(jù)映射到瀏覽器頁(yè)面 ----映射關(guān)系統(tǒng)稱(chēng)】

5.keepAlive用過(guò)嗎？什么作用？

緩存路由組件

使用的是vue的一個(gè)組件，參考vue的官方文檔

使用這個(gè)東西可以保證我們?cè)谇袚Q組件的時(shí)候，原來(lái)顯示的組件不被銷(xiāo)毀

-----【保障組件的數(shù)據(jù)不會(huì)被切換路由而銷(xiāo)毀數(shù)據(jù)】

Home是對(duì)應(yīng)的組件對(duì)象的名字，不是路由的名字

6.多維數(shù)組拍平

數(shù)組拍平也稱(chēng)數(shù)組扁平化，就是將數(shù)組里面的數(shù)組打開(kāi)，最后合并為一個(gè)數(shù)組

一紅六種方法吧……

了解的請(qǐng)看：

7.跨域的原因 解決方案

跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。

這樣就可以說(shuō)同源策略----協(xié)議---端口---域名

原生的src和href可以解決跨域

代理可以解決

請(qǐng)求頭也可以攜帶瀏覽器提示的也可以解決

一般都是后端解決跨域問(wèn)題

【別的需要了解看下方鏈接】

8.uniApp兼容問(wèn)題

§ 如果你使用cli創(chuàng)建項(xiàng)目（即項(xiàng)目根目錄是package.json），不管用什么ide，即便是用HBuilderX，切記cli項(xiàng)目的編譯器是在項(xiàng)目下的，HBuilderX不管怎么升級(jí)都不會(huì)影響編譯器版本。你需要手動(dòng)npm update來(lái)升級(jí)編譯器。以及如果你想要安裝less、scss等預(yù)編譯器，也需要自己npm安裝在項(xiàng)目下，而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包，請(qǐng)注意HBuilderX升級(jí)后，真機(jī)運(yùn)行基座和云打包對(duì)應(yīng)引擎跟隨HBuilderX升級(jí)，而你的sdk需要手動(dòng)升級(jí)。sdk的版本升級(jí)一般滯后HBuilderX正式版升級(jí)一兩天。

§ 如果你使用自定義基座，之前制作的自定義基座是不會(huì)跟隨HBuilderX升級(jí)的，升級(jí)HBuilderX后你應(yīng)該重新制作新版自定義基座。

§ 如果你使用wgt升級(jí)，新版HBuilderX編譯的wgt，運(yùn)行到之前的runtime上，一定要先測(cè)試好，看有沒(méi)有兼容性問(wèn)題。如果有問(wèn)題，就不要wgt升級(jí)，整包升級(jí)。

§ 考慮到向下兼容，uni-app編譯器在升級(jí)為新的自定義組件模式后，同時(shí)保留了對(duì)老編譯模式的向下兼容。

在HBuilderX alpha版中，App端一定會(huì)使用新編譯器，不理會(huì)manifest配置。

在HBuilderX 正式版中，新創(chuàng)建的項(xiàng)目會(huì)使用新編譯器，老項(xiàng)目不會(huì)強(qiáng)制使用，而是開(kāi)發(fā)者自己在manifest里配置開(kāi)啟。

§ 如果你使用其他ide開(kāi)發(fā)uni-app，會(huì)經(jīng)常因?yàn)槠村e(cuò)單詞而運(yùn)行失敗，因?yàn)榻?jīng)過(guò)webpack編譯一道，很多錯(cuò)誤反應(yīng)的不夠直觀，排錯(cuò)時(shí)間很長(zhǎng)，不如從開(kāi)始就依賴(lài)有良好提示的HBuilderX，避免敲錯(cuò)單詞。

§ 云打包的引擎版本說(shuō)明

HBuilderX Alpha，只有1套云打包機(jī)，不管你的HBuilderX alpha版本多少，對(duì)應(yīng)的打包機(jī)一定是最新的alpha版的客戶端引擎。

HBuilderX正式版，有2套打包機(jī)，一個(gè)是最新正式版，一個(gè)是次新正式版。

中間的緊急更新版本沒(méi)有獨(dú)立打包機(jī)。

舉個(gè)例子：

HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個(gè)正式版。

那么當(dāng)前可用的打包機(jī)有1.9.1和1.8.2這2臺(tái)。（即每個(gè)大版本的最后一個(gè)版本）

除了這2個(gè)HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版對(duì)應(yīng)的打包機(jī)。（即只保留2個(gè)大版本的云打包機(jī)）

【詳情請(qǐng)看】

一、HTML

HTML書(shū)寫(xiě)規(guī)范

H5新增標(biāo)簽

HTML渲染過(guò)程

二、CSS

css盒子模型概念

css彈性布局概念

三、JavaScript

事件模型

DOM2級(jí)事件模型

閉包

原型鏈

四、移動(dòng)Web開(kāi)發(fā)

常見(jiàn)的布局方案

移動(dòng)端前端常見(jiàn)的觸摸相關(guān)事件touch、tap、swipe等整理

移動(dòng)端前端手勢(shì)事件

移動(dòng)端頁(yè)面渲染優(yōu)化

GPU渲染

GPU核心渲染過(guò)程

五、調(diào)試

常用的調(diào)試工具

Chrome控制臺(tái)調(diào)試js使用

移動(dòng)端測(cè)試

六、HTTP網(wǎng)絡(luò)知識(shí)

常見(jiàn)的HTTP狀態(tài)碼

不同請(qǐng)求類(lèi)型的區(qū)別

WEB緩存方案

——————————

?？途W(wǎng)（）

- 專(zhuān)業(yè)IT筆試面試備考平臺(tái)

- 最全C++JAVA前端等互聯(lián)網(wǎng)技術(shù)求職題庫(kù)

- 全面提升IT編程能力

- 程序員交友圣地

分享了一些Web前端的面試題，限時(shí)一小時(shí)，你看看自己能夠答出多少道！

放心，這些面試題都是一些非常基礎(chǔ)的知識(shí)，只要你在平時(shí)認(rèn)真聽(tīng)課、學(xué)習(xí)了，那么這些面試題肯定不會(huì)難道你。

建議：雖然沒(méi)有人監(jiān)督你，但還是希望你不要去尋找答案，脫離百度，拿起紙筆，你試一下自己究竟能夠答出個(gè)什么水平！有沒(méi)有真本領(lǐng)？答案盡在這些面試題里！那么，你準(zhǔn)備好了嗎？OK！計(jì)時(shí)開(kāi)始！

一、HTML常見(jiàn)題目

01、Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？

02、HTML5為什么只需要寫(xiě)？

03、行內(nèi)元素有哪些？塊級(jí)元素有哪些？空(void)元素有那些？

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

05、介紹一下你對(duì)瀏覽器內(nèi)核的理解？

06、常見(jiàn)的瀏覽器內(nèi)核有哪些？

07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？

08、如何區(qū)分HTML和HTML5？

09、簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？

10、HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？

二、CSS類(lèi)的題目

01、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

02、CSS選擇符有哪些？哪些屬性可以繼承？

03、CSS優(yōu)先級(jí)算法如何計(jì)算？

04、CSS3新增偽類(lèi)有那些？

05、如何居中p？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的p居中？

06、display有哪些值？說(shuō)明他們的作用。

07、position的值relative和absolute定位原點(diǎn)是？

08、CSS3有哪些新特性？

09、請(qǐng)解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場(chǎng)景？

10、用純CSS創(chuàng)建一個(gè)三角形的原理是什么？

三、Java類(lèi)的題目

01、介紹Java的基本數(shù)據(jù)類(lèi)型。

02、說(shuō)說(shuō)寫(xiě)Java的基本規(guī)范？

03、Java原型，原型鏈？有什么特點(diǎn)？

04、Java有幾種類(lèi)型的值？(堆：原始數(shù)據(jù)類(lèi)型和棧：引用數(shù)據(jù)類(lèi)型)，你能畫(huà)一下他們的內(nèi)存圖嗎？

05、Java如何實(shí)現(xiàn)繼承？

06、Java創(chuàng)建對(duì)象的幾種方式？

07、Java作用鏈域？

08、談?wù)凾his對(duì)象的理解。

09、eval是做什么的？

10、什么是window對(duì)象？什么是document對(duì)象？

OK，一小時(shí)到了，這個(gè)時(shí)間可不算短了，那么這些面試題你答出了幾道呢？你寫(xiě)的答案正確了嗎？現(xiàn)在你可以去翻看答案了。

如果你答出了絕大多數(shù)的或者是全部的題，并且答案也正確了，那么恭喜你……

你這時(shí)心里是不是有點(diǎn)小竊喜，認(rèn)為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實(shí)上這只能表明你的基礎(chǔ)扎實(shí)，畢竟這只是一些非常基礎(chǔ)的面試題。騷年~繼續(xù)努力吧！

如果你只答出了小部分或者答出了大部分題但答案不正確，那么我只想說(shuō)：“騷年，你的水平還差的遠(yuǎn)呢。”連這么基礎(chǔ)的題你都打不出來(lái)，還想拿高薪？回去再練一段時(shí)間吧！

扎實(shí)的基礎(chǔ)是你拿高薪的重要武器，如果你連基礎(chǔ)都不扎實(shí)，那么想要攻克“高薪”這個(gè)厚實(shí)的堡壘，那只是癡人說(shuō)夢(mèng)罷了。

1.前端框架類(lèi)問(wèn)題，問(wèn)你會(huì)不會(huì)用vue react啊

2.語(yǔ)言類(lèi)，問(wèn)你一些JavaScript語(yǔ)言的問(wèn)題

3.項(xiàng)目經(jīng)驗(yàn)，讓你講講做過(guò)的項(xiàng)目，遇到的問(wèn)題和解決之道

關(guān)于vue前端面試問(wèn)題和vue前端面試題2020的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。