前端工程師憑什么這么值錢(qián)？

來(lái)源：奇酷教育發(fā)表于：2021-09-14 15:00:27

前端工程師憑什么這么值錢(qián)？

　　提到前端，大多數(shù)人都會(huì)想到薪資高。也正因?yàn)槿绱耍芏嗳讼胍獜氖虑岸碎_(kāi)發(fā)這個(gè)崗位，也由此衍生出來(lái)一個(gè)問(wèn)題：為什么前端工程師供不應(yīng)求，但還是有很多學(xué)前端的人找不到工作？

　　其實(shí)行業(yè)不是缺前端工程師，是缺優(yōu)秀的前端工程師。

　　如果說(shuō)以前只會(huì)HTML、CSS網(wǎng)頁(yè)制作、簡(jiǎn)單的JS和jQuery，那找工作確實(shí)很容易而且待遇還不錯(cuò)。而現(xiàn)在隨著前端的快速發(fā)展，各公司的要求不僅限于要快速實(shí)現(xiàn)效果和功能，也更追求整個(gè)項(xiàng)目的性能、優(yōu)化及后期維護(hù)成本。這也就是為什么大多數(shù)人找不到工作的原因。

　　和優(yōu)秀的前端工程師差距在哪里

　　很多人嘴里所說(shuō)的（ma）前（tu）端(zai)是這樣的：

　　能拍圖的拍圖，絕不多寫(xiě)一行代碼；

　　網(wǎng)頁(yè)布局和功能能在網(wǎng)上扒絕不自己寫(xiě)；

　　只要看著展示效果沒(méi)毛病，絕不考慮代碼是否優(yōu)雅，性能是否過(guò)得去。

　　而優(yōu)秀的前端工程師是什么樣的？

　　能用代碼和icon實(shí)現(xiàn)的絕不拍圖；

　　會(huì)積累可復(fù)用功能性代碼，封裝自己的組件庫(kù)甚至開(kāi)發(fā)屬于公司自己的內(nèi)部專(zhuān)用框架等等；

　　反復(fù)優(yōu)化項(xiàng)目代碼更新迭代提升代碼可讀性，降低項(xiàng)目維護(hù)成本，提升項(xiàng)目性能等等。

　　學(xué)習(xí)前端，如果前面的基礎(chǔ)沒(méi)有掌握，后面的學(xué)習(xí)就會(huì)特別的困難。

　　很多大佬都是從切圖仔過(guò)來(lái)的，只是很多人通過(guò)不斷的學(xué)習(xí)成為了大佬，然而有的切圖仔還是切圖仔，而有的人連圖都沒(méi)得切了。

　　年薪30W的開(kāi)發(fā)崗要求是什么？

　　那什么樣的開(kāi)發(fā)才能拿到年薪30W的薪資呢？

　　以薪資高，好入門(mén)的前端崗位為例，阿里云對(duì)應(yīng)屆生的要求是熟練掌握前端技術(shù)，熟悉前端框架，并具有相關(guān)項(xiàng)目經(jīng)驗(yàn)：

　　字節(jié)跳動(dòng)對(duì)前端的要求也同樣是技術(shù)，再加上前端工程化相關(guān)內(nèi)容：

　　一句話概括：技術(shù)、項(xiàng)目都要過(guò)硬才行。

　　17個(gè)Vue知識(shí)點(diǎn)全都會(huì)

　　榮耀黃金

　　1. Vue的優(yōu)點(diǎn)？Vue的缺點(diǎn)？

　　優(yōu)點(diǎn)：漸進(jìn)式，組件化，輕量級(jí)，虛擬dom，響應(yīng)式，單頁(yè)面路由，數(shù)據(jù)與視圖分開(kāi)

　　缺點(diǎn)：?jiǎn)雾?yè)面不利于seo，不支持IE8以下，首屏加載時(shí)間長(zhǎng)

　　2. 為什么說(shuō)Vue是一個(gè)漸進(jìn)式框架？

　　漸進(jìn)式：通俗點(diǎn)講就是，你想用啥你就用啥，咱也不強(qiáng)求你。你想用component就用，不用也行，你想用vuex就用，不用也可以

　　image.png

　　3. Vue跟React的異同點(diǎn)？

　　相同點(diǎn)：

　　1.都使用了虛擬dom

　　2.組件化開(kāi)發(fā)

　　3.都是單向數(shù)據(jù)流(父子組件之間，不建議子修改父?jìng)飨聛?lái)的數(shù)據(jù))

　　4.都支持服務(wù)端渲染

　　不同點(diǎn)：

　　1.React的JSX，Vue的template

　　2.數(shù)據(jù)變化，React手動(dòng)(setState)，Vue自動(dòng)(初始化已響應(yīng)式處理，Object.defineProperty)

　　3.React單向綁定，Vue雙向綁定

　　4.React的Redux，Vue的Vuex

　　4. MVVM是什么？和MVC有何區(qū)別呢？

　　MVC

　　Model(模型)：負(fù)責(zé)從數(shù)據(jù)庫(kù)中取數(shù)據(jù)

　　View(視圖)：負(fù)責(zé)展示數(shù)據(jù)的地方

　　Controller(控制器)：用戶(hù)交互的地方，例如點(diǎn)擊事件等等

　　思想：Controller將Model的數(shù)據(jù)展示在View上

　　image.png

　　MVVM

　　VM：也就是View-Model，做了兩件事達(dá)到了數(shù)據(jù)的雙向綁定一是將【模型】轉(zhuǎn)化成【視圖】，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁(yè)面。實(shí)現(xiàn)的方式是：數(shù)據(jù)綁定。二是將【視圖】轉(zhuǎn)化成【模型】，即將所看到的頁(yè)面轉(zhuǎn)化成后端的數(shù)據(jù)。實(shí)現(xiàn)的方式是：DOM 事件監(jiān)聽(tīng)。

　　思想：實(shí)現(xiàn)了 View 和 Model 的自動(dòng)同步，也就是當(dāng) Model 的屬性改變時(shí)，我們不用再自己手動(dòng)操作 Dom 元素，來(lái)改變 View 的顯示，而是改變屬性后該屬性對(duì)應(yīng) View 層顯示會(huì)自動(dòng)改變（對(duì)應(yīng)Vue數(shù)據(jù)驅(qū)動(dòng)的思想）

　　區(qū)別

　　整體看來(lái)，MVVM 比 MVC 精簡(jiǎn)很多，不僅簡(jiǎn)化了業(yè)務(wù)與界面的依賴(lài)，還解決了數(shù)據(jù)頻繁更新的問(wèn)題，不用再用選擇器操作 DOM 元素。因?yàn)樵?MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也觀察不到 View，這種低耦合模式提高代碼的可重用性

　　Vue是不是MVVM框架？

　　Vue是MVVM框架，但是不是嚴(yán)格符合MVVM，因?yàn)镸VVM規(guī)定Model和View不能直接通信，而Vue的ref可以做到這點(diǎn)

　　5. Vue和JQuery的區(qū)別在哪？為什么放棄JQuery用Vue？

　　1.jQuery是直接操作DOM，Vue不直接操作DOM，Vue的數(shù)據(jù)與視圖是分開(kāi)的，Vue只需要操作數(shù)據(jù)即可

　　2.jQuery的操作DOM行為是頻繁的，而Vue利用虛擬DOM的技術(shù)，大大提高了更新DOM時(shí)的性能

　　3.Vue中不倡導(dǎo)直接操作DOM，開(kāi)發(fā)者只需要把大部分精力放在數(shù)據(jù)層面上

　　4.Vue集成的一些庫(kù)，大大提高開(kāi)發(fā)效率，比如Vuex，Router等

　　6. Vue的作者是誰(shuí)？大聲說(shuō)出它的名字?。?！

　　他的名字就是：魷魚(yú)西

　　永恒鉆石

　　7. 為什么data是個(gè)函數(shù)并且返回一個(gè)對(duì)象呢？

　　data之所以只一個(gè)函數(shù)，是因?yàn)橐粋€(gè)組件可能會(huì)多處調(diào)用，而每一次調(diào)用就會(huì)執(zhí)行data函數(shù)并返回新的數(shù)據(jù)對(duì)象，這樣，可以避免多處調(diào)用之間的數(shù)據(jù)污染。

　　8. 使用過(guò)哪些Vue的修飾符呢？

　　可以看我這篇文章「百毒不侵」面試官最喜歡問(wèn)的13種Vue修飾符[1]

　　截屏2021-07-11 下午9.56.53.png

　　9. 使用過(guò)哪些Vue的內(nèi)部指令呢？

　　10. 組件之間的傳值方式有哪些？

　　父組件傳值給子組件，子組件使用props進(jìn)行接收

　　子組件傳值給父組件，子組件使用$emit+事件對(duì)父組件進(jìn)行傳值

　　組件中可以使用$parent和$children獲取到父組件實(shí)例和子組件實(shí)例，進(jìn)而獲取數(shù)據(jù)

　　使用$attrs和$listeners，在對(duì)一些組件進(jìn)行二次封裝時(shí)可以方便傳值，例如A->B->C

　　使用$refs獲取組件實(shí)例，進(jìn)而獲取數(shù)據(jù)

　　使用Vuex進(jìn)行狀態(tài)管理

　　使用eventBus進(jìn)行跨組件觸發(fā)事件，進(jìn)而傳遞數(shù)據(jù)

　　使用provide和inject，官方建議我們不要用這個(gè)，我在看ElementUI源碼時(shí)發(fā)現(xiàn)大量使用

　　使用瀏覽器本地緩存，例如localStorage

　　11. 路由有哪些模式呢？又有什么不同呢？

　　hash模式：通過(guò)#號(hào)后面的內(nèi)容的更改，觸發(fā)hashchange事件，實(shí)現(xiàn)路由切換

　　history模式：通過(guò)pushState和replaceState切換url，觸發(fā)popstate事件，實(shí)現(xiàn)路由切換，需要后端配合

　　12. 如何設(shè)置動(dòng)態(tài)class，動(dòng)態(tài)style？

　　動(dòng)態(tài)class對(duì)象：

　　動(dòng)態(tài)class數(shù)組：

　　動(dòng)態(tài)style對(duì)象：

　　動(dòng)態(tài)style數(shù)組：

　　13. v-if和v-show有何區(qū)別？

　　1.v-if是通過(guò)控制dom元素的刪除和生成來(lái)實(shí)現(xiàn)顯隱，每一次顯隱都會(huì)使組件重新跑一遍生命周期，因?yàn)轱@隱決定了組件的生成和銷(xiāo)毀

　　2.v-show是通過(guò)控制dom元素的css樣式來(lái)實(shí)現(xiàn)顯隱，不會(huì)銷(xiāo)毀

　　3.頻繁或者大數(shù)量顯隱使用v-show，否則使用v-if

　　14. computed和watch有何區(qū)別？

　　1.computed是依賴(lài)已有的變量來(lái)計(jì)算一個(gè)目標(biāo)變量，大多數(shù)情況都是多個(gè)變量湊在一起計(jì)算出一個(gè)變量，并且computed具有緩存機(jī)制，依賴(lài)值不變的情況下其會(huì)直接讀取緩存進(jìn)行復(fù)用，computed不能進(jìn)行異步操作

　　2.watch是監(jiān)聽(tīng)某一個(gè)變量的變化，并執(zhí)行相應(yīng)的回調(diào)函數(shù)，通常是一個(gè)變量的變化決定多個(gè)變量的變化，watch可以進(jìn)行異步操作

　　3.簡(jiǎn)單記就是：一般情況下computed是多對(duì)一，watch是一對(duì)多

　　15. Vue的生命周期，講一講？

　　16. 為什么v-if和v-for不建議用在同一標(biāo)簽？

　　在Vue2中，v-for優(yōu)先級(jí)是高于v-if的，咱們來(lái)看例子

　　上面的寫(xiě)法是v-for和v-if同時(shí)存在，會(huì)先把7個(gè)元素都遍歷出來(lái)，然后再一個(gè)個(gè)判斷是否為3，并把3給隱藏掉，這樣的壞處就是，渲染了無(wú)用的3節(jié)點(diǎn)，增加無(wú)用的dom操作，建議使用computed來(lái)解決這個(gè)問(wèn)題：