面試形式：線下面試：時(shí)長20分鐘

特殊要求：996加班+30k上限

面試評價(jià)：技術(shù)題

面試官：前端技術(shù)人員

面試官的提問大綱：本公司招聘要求+本人簡歷

面試流程以及面試題：

第一個(gè)環(huán)節(jié)：自我介紹

第二個(gè)環(huán)節(jié)：技術(shù)面

1、vue中的路由守衛(wèi)

? ?- 路由守衛(wèi)是Vue Router提供的一種機(jī)制,允許開發(fā)者在路由跳轉(zhuǎn)的不同階段執(zhí)行自定義的邏輯。

? ?- 主要分為全局守衛(wèi)、單個(gè)路由獨(dú)享守衛(wèi)和組件內(nèi)守衛(wèi)三種類型。

? ?- 通過使用beforeEach、beforeResolve和afterEach等鉤子函數(shù),可以在路由跳轉(zhuǎn)前、跳轉(zhuǎn)解析后和跳轉(zhuǎn)完成后執(zhí)行相應(yīng)的邏輯,如權(quán)限驗(yàn)證、數(shù)據(jù)預(yù)取等。

? ?- 路由守衛(wèi)對于實(shí)現(xiàn)SPA應(yīng)用的路由邏輯控制非常重要。

?

2. Vuex是什么?有什么屬性和方法?怎么應(yīng)用?

? ?- Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。

? ?- Vuex主要有以下幾個(gè)屬性和方法:

? ? ?- state:用于存儲應(yīng)用程序的狀態(tài)數(shù)據(jù)。

? ? ?- mutations:同步更新狀態(tài)的方法。

? ? ?- actions:異步操作,可以提交mutations來更新狀態(tài)。

? ? ?- getters:從state中派生出的計(jì)算屬性。

? ?- 在Vue應(yīng)用中,我們通常將狀態(tài)管理相關(guān)的邏輯集中在Vuex中,使用commit提交mutations來更新狀態(tài),使用dispatch觸發(fā)actions來執(zhí)行異步操作。這樣可以更好地管理應(yīng)用程序的狀態(tài)。

?

3. Vue2和Vue3響應(yīng)式原理有什么不同?

? ?- Vue2使用Object.defineProperty實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式,存在一些限制,如不能檢測對象屬性的添加或刪除。

? ?- Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式,可以檢測任何變化,更加強(qiáng)大和靈活。

? ?- Vue3的響應(yīng)式系統(tǒng)還引入了一些新的概念,如ref和reactive,用于處理基本類型和引用類型的響應(yīng)式數(shù)據(jù)。

? ?- 總的來說,Vue3的響應(yīng)式原理更加完備和高效,能夠更好地支持現(xiàn)代前端應(yīng)用的需求。

?

4. CSS移動(dòng)端適配?

? ?- 常見的移動(dòng)端適配方案有:

? ? ?- 使用viewport設(shè)置

? ? ?- 使用媒體查詢 @media

? ? ?- 使用rem單位

? ?- 其中rem單位是最常用的方案,可以根據(jù)屏幕大小動(dòng)態(tài)調(diào)整字體大小,從而實(shí)現(xiàn)整體布局的自適應(yīng)。

? ?- 配合工具如PostCSS、amfe-flexible等,可以更方便地實(shí)現(xiàn)rem適配。

?

5. 藍(lán)湖設(shè)計(jì)稿移動(dòng)端適配方法?

? ?- 藍(lán)湖設(shè)計(jì)稿通常采用750px寬度的設(shè)計(jì)尺寸。

? ?- 可以使用PostCSS的px2rem插件,根據(jù)設(shè)計(jì)稿的寬度自動(dòng)轉(zhuǎn)換成rem單位。

? ?- 同時(shí)配合amfe-flexible庫,可以自動(dòng)根據(jù)設(shè)備寬度計(jì)算根元素font-size,從而實(shí)現(xiàn)整體布局的自適應(yīng)。

? ?- 這種結(jié)合PostCSS和amfe-flexible的方式是目前移動(dòng)端適配的主流解決方案。

?

6. PostCSS和amfe-flexible怎么適配?

? ?- PostCSS是一個(gè)CSS轉(zhuǎn)換和構(gòu)建工具,可以通過插件擴(kuò)展其功能。

? ?- px2rem插件可以將CSS中的px單位自動(dòng)轉(zhuǎn)換為rem單位。

? ?- amfe-flexible是一個(gè)動(dòng)態(tài)計(jì)算根元素font-size的庫,可以根據(jù)設(shè)備寬度自動(dòng)調(diào)整,實(shí)現(xiàn)自適應(yīng)布局。

? ?- 結(jié)合這兩個(gè)工具,可以很方便地實(shí)現(xiàn)基于rem的移動(dòng)端適配方案。通過PostCSS對CSS進(jìn)行px到rem的轉(zhuǎn)換,再通過amfe-flexible動(dòng)態(tài)計(jì)算根元素font-size,可以達(dá)到全面的移動(dòng)端適配。