前端面試題

Binguner 發(fā)布于2019-08-23 16:20 / 2277人閱讀

摘要：是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。，有幾種鉤子函數(shù)三種，第一種全局導(dǎo)航鉤子，作用跳轉(zhuǎn)前進(jìn)行判斷攔截。創(chuàng)建前后在階段，實(shí)例的掛載元素和數(shù)據(jù)對(duì)象都為，還未初始化。更新前后當(dāng)變化時(shí)，會(huì)觸發(fā)和方法。

HTML
1，分別寫(xiě)出以下的幾個(gè) HTML 標(biāo)簽，加粗，居中，下標(biāo)，字體
加粗
下標(biāo)
居中

字體
2，請(qǐng)寫(xiě)出至少5個(gè)html5新增的標(biāo)簽，并說(shuō)明其語(yǔ)義和應(yīng)用場(chǎng)景
section 文章中的某一個(gè)段落
nav 導(dǎo)航
header 頭部
footer 尾部
aside 頁(yè)面關(guān)聯(lián)部較低的
3，說(shuō)出 html 語(yǔ)義化的理？
a) 有利于 seo 優(yōu)化
b) 去掉樣式也可以清晰的看到頁(yè)面的結(jié)構(gòu)
c) 方便設(shè)備的閱讀
d) 便與團(tuán)隊(duì)的開(kāi)發(fā)和維護(hù)
4，請(qǐng)簡(jiǎn)述一下 src 和 herf 的區(qū)別？
src 用于替換當(dāng)前的元素， href 用于和服務(wù)器建立連接。

CSS
1，如何清除浮動(dòng)？
overflow：hidden， claer：both。
2，如何隱藏一個(gè)元素？
visibility：hidden
display：none
opasity：0
transform: scale(0)，設(shè)置無(wú)線小
height：0
3，在CSS樣式中常使用px、em，各有什么優(yōu)劣，在表現(xiàn)上有什么區(qū)別？
px是相對(duì)長(zhǎng)度單位，相對(duì)于顯示器屏幕分辨率而言的。
em是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。
px定義的字體，無(wú)法用瀏覽器字體放大功能。
em的值并不是固定的，會(huì)繼承父級(jí)元素的字體大小，1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值。
4，CSS3有哪些新特性？
CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），對(duì)文字加特效（text-shadow），線性漸變（gradient），變形（transform）

Vue
1，watch 和 computed 的區(qū)別？
computed 是計(jì)算屬性，對(duì)綁定到 view 的數(shù)據(jù)進(jìn)行處理，不可定義到 data 里，因?yàn)榉祷亟o的結(jié)果會(huì)附給這個(gè)變量，變量不可被重復(fù)定義。
computed 具有緩存性，頁(yè)面重新渲染值不變化,計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。
watch 是一個(gè)觀察動(dòng)作，無(wú)緩存性，頁(yè)面重新渲染時(shí)值不變化也會(huì)執(zhí)行。
深度監(jiān)聽(tīng)需要加，deep = true。
2，active-class 是哪個(gè)組件的屬性？
vue-router 的 router-link 的屬性。
3，怎么定義動(dòng)態(tài)路由？
在 router 目錄下的 index.js 中對(duì) path 屬性加上 id，使用router對(duì)象的params.id。
4，vue-router 有幾種鉤子函數(shù)？
三種，
第一種：全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。、
第二種：組件內(nèi)的鉤子
第三種：多帶帶路由獨(dú)享組件
5，Sass 和 Less 的區(qū)別？
都是 CSS 的預(yù)編譯語(yǔ)言，定義變量的符號(hào)不一樣，Less 是@，Sass 是$, Sass 支持條件語(yǔ)句，if，else，for；Less 不支持，Sass 是有服務(wù)器端處理的，Less 需要引入 Less.js 來(lái)處理 Less 代碼輸出到瀏覽器。
6，axios 是什么？
請(qǐng)求后臺(tái)的資源模塊，是使用 promis 封裝的，成功 .then 輸出，失敗 .catch 輸出。
7，vuex 是什么？
vuex 是 vue 框架種的狀態(tài)管理工具，一般在登錄狀態(tài)，音樂(lè)播放，組件之中使用?？梢杂?mapState([]),mapActions,mapMutations 來(lái)使用。
8，說(shuō)下你對(duì)生命周期的理解。
a) 創(chuàng)建前/后：在beforeCreated階段，vue實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化。在created階段，vue實(shí)例的數(shù)據(jù)對(duì)象data有了，$el還沒(méi)有。
b) 載入前/后：在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。
c) 更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法。
d) 銷(xiāo)毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和dom的綁定，但是dom結(jié)構(gòu)依然存在
9，對(duì)于 MVVM 的理解？
MVVM 是 Model-View-ViewModel 的縮寫(xiě)。
Model代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。
View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)。
ViewModel 監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為、處理用戶(hù)交互，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象，連接Model和View。
在MVVM架構(gòu)下，View 和 Model 之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的，因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
ViewModel 通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理。