金三銀四顶伞，國內(nèi)互聯(lián)網(wǎng)招聘市場繼續(xù)發(fā)力饵撑，崗位競爭空前激烈。問了幾位 HR 朋友唆貌，發(fā)現(xiàn)了幾種聲音：
“投簡歷的人挺多滑潘，但是合適的卻很少∠橇”
“好不容易挖來人语卤，結(jié)果2輪面試被刷了，現(xiàn)在大廠搬磚的也是參差不齊...”
“在招前端酪刀，要么學(xué)歷不夠粹舵，要么只會(huì)紙上談兵，要么能力一般骂倘，還獅子大張口....”
好崗位的確不缺眼滤，匹配者卻很少。
大廠历涝，高薪诅需，高等級(jí)人人想要，門檻卻一個(gè)比一個(gè)高荧库。
不過堰塌，話說回來，跳槽成功的人確實(shí)也不在少數(shù)分衫，福利待遇也確實(shí)不賴场刑。前不久，朋友超人就通過三輪面試蚪战，跳槽進(jìn)了阿里牵现，繼續(xù)做前端。
所以說屎勘，打鐵還需自身硬施籍。他做了三年前端，工作務(wù)實(shí)概漱，能干丑慎，跳槽大廠也在情理之中！
說到面試瓤摧，問了他的情況竿裂。他說“ Vue實(shí)現(xiàn)原理問挺多，還有它的各種優(yōu)化手段照弥。再有就是業(yè)務(wù)邏輯.......“
照此看來腻异，對(duì)于現(xiàn)在的前端求職者，只會(huì)用 Vue是不夠的了这揣，還需深挖它的內(nèi)部框架和實(shí)現(xiàn)原理悔常。
接下來影斑，超全的前端 Vue學(xué)習(xí)資料這就來啦，需要的朋友趕緊收藏~
Vue知識(shí)要點(diǎn)
為什么 Vuex的mutation中不能做異步操作机打？
- Vuex中所有的狀態(tài)更新的唯一途徑都是mutation矫户，異步操作通過 Action 來提交 mutation實(shí)現(xiàn)，這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化残邀，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用皆辽。
- 每個(gè)mutation執(zhí)行完成后都會(huì)對(duì)應(yīng)到一個(gè)新的狀態(tài)變更，這樣devtools就可以打個(gè)快照存下來芥挣，然后就可以實(shí)現(xiàn) time-travel 了驱闷。如果mutation支持異步操作，就沒有辦法知道狀態(tài)是何時(shí)更新的空免，無法很好的進(jìn)行狀態(tài)的追蹤空另，給調(diào)試帶來困難。
為什么v-for和v-if不建議用在一起
- 當(dāng) v-for 和 v-if 處于同一個(gè)節(jié)點(diǎn)時(shí)蹋砚，v-for 的優(yōu)先級(jí)比 v-if 更高痹换，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。如果要遍歷的數(shù)組很大都弹，而真正要展示的數(shù)據(jù)很少時(shí)，這將造成很大的性能浪費(fèi)
- 這種場景建議使用 computed匙姜，先對(duì)數(shù)據(jù)進(jìn)行過濾
組件中的data為什么是一個(gè)函數(shù)畅厢？
- 一個(gè)組件被復(fù)用多次的話，也就會(huì)創(chuàng)建多個(gè)實(shí)例氮昧。本質(zhì)上框杜，這些實(shí)例用的都是同一個(gè)構(gòu)造函數(shù)。
- 如果data是對(duì)象的話袖肥，對(duì)象屬于引用類型咪辱，會(huì)影響到所有的實(shí)例。所以為了保證組件不同的實(shí)例之間data不沖突椎组，data必須是一個(gè)函數(shù)油狂。
nextTick的實(shí)現(xiàn)原理是什么？
- 在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)寸癌，在修改數(shù)據(jù)之后立即使用 nextTick 來獲取更新后的 DOM专筷。
- nextTick主要使用了宏任務(wù)和微任務(wù)。
- 根據(jù)執(zhí)行環(huán)境分別嘗試采用Promise蒸苇、MutationObserver磷蛹、setImmediate，如果以上都不行則采用setTimeout定義了一個(gè)異步方法溪烤，多次調(diào)用nextTick會(huì)將方法存入隊(duì)列中味咳，通過這個(gè)異步方法清空當(dāng)前隊(duì)列庇勃。
Vue不能檢測數(shù)組的哪些變動(dòng)？Vue 怎么用 vm.$set() 解決對(duì)象新增屬性不能響應(yīng)的問題槽驶？
- Vue 不能檢測以下數(shù)組的變動(dòng)：
- 第一類問題
// 法一：Vue.set Vue.set(vm.items, indexOfItem, newValue)
// 法二：Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) - 第二類問題责嚷，可使用 splice：vm.items.splice(newLength)
- 當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(shù)組的長度時(shí)捺檬，例如：vm.items.length = newLength
解決辦法：
- 第一類問題
- vm. $set 的實(shí)現(xiàn)原理是：
- 如果目標(biāo)是數(shù)組再层，直接使用數(shù)組的 splice 方法觸發(fā)相應(yīng)式；
- 如果目標(biāo)是對(duì)象堡纬，會(huì)先判讀屬性是否存在聂受、對(duì)象是否是響應(yīng)式，最終如果要對(duì)屬性進(jìn)行響應(yīng)式處理烤镐，則是通過調(diào)用defineReactive 方法進(jìn)行響應(yīng)式處理（ defineReactive 方法就是 Vue 在初始化對(duì)象時(shí)蛋济，給對(duì)象屬性采用 Object.defineProperty 動(dòng)態(tài)添加 getter 和 setter 的功能所調(diào)用的方法）
Vue中組件生命周期調(diào)用順序是什么樣的？
- 組件的調(diào)用順序都是先父后子,渲染完成的順序是先子后父炮叶。
-
組件的銷毀操作是先父后子碗旅，銷毀完成的順序是先子后父。
在這里插入圖片描述
Vue 熱點(diǎn)面試題
- vue-cli工程
- vue核心知識(shí)點(diǎn)
- vue-router
- vuex
- http請(qǐng)求
- UI樣式
- 常用功能
- MVVM設(shè)計(jì)模式
