資訊專欄INFORMATION COLUMN
摘要：如果你只是簡單羅列出這幾個鉤子函數的名稱，不具體深入闡述的話，你這樣的回答很難令面試官滿意。那么接下來，閏土大叔將手摸手教你如何深入淺出地說出令面試官滿意的有亮點的回答。
當面試官問：“談談你對vue的生命周期的理解”，聽到這句話你是不是心里暗自竊喜：這也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 這幾個鉤子函數么，創建=>掛載=>更新=>銷毀，So easy ！！！
非也非也。如果你只是簡單羅列出這幾個鉤子函數的名稱，不具體深入闡述的話，你這樣的回答很難令面試官滿意。如何才能以點帶面深入闡述自己對vue的生命周期理解，從而讓面試官對你留下好印象呢？
別急，閏土大叔來告訴你，下次再碰到這個問題，你可以直接甩給面試官下面這張Image就OK了~
當然，甩張Image給面試官這句話肯定是開玩笑的（適度幽默，緩解緊張氣氛）。不過這張流程圖還是有用的，因為它是我從Vue官網上拷貝下來的，只要你能理解了這張圖，也就對Vue的生命周期有了一個大致的了解。那么接下來，閏土大叔將手摸手教你如何深入淺出地說出令面試官滿意的、有亮點的回答。
在談到Vue的生命周期的時候，我們首先需要創建一個實例，也就是在 new Vue ( ) 的對象過程當中，首先執行了init（init是vue組件里面默認去執行的），在init的過程當中首先調用了beforeCreate，然后在injections（注射）和reactivity（反應性）的時候，它會再去調用created。所以在init的時候，事件已經調用了，我們在beforeCreate的時候千萬不要去修改data里面賦值的數據，最早也要放在created里面去做（添加一些行為）。
當created完成之后，它會去判斷instance（實例）里面是否含有“el”option（選項），如果沒有的話，它會調用vm.$mount(el)這個方法，然后執行下一步；如果有的話，直接執行下一步。緊接著會判斷是否含有“template”這個選項，如果有的話，它會把template解析成一個render function ，這是一個template編譯的過程，結果是解析成了render函數：
render (h) {
return h("div", {}, this.text)
}
解釋一下，render函數里面的傳參h就是Vue里面的createElement方法，return返回一個createElement方法，其中要傳3個參數，第一個參數就是創建的div標簽；第二個參數傳了一個對象，對象里面可以是我們組件上面的props，或者是事件之類的東西；第三個參數就是div標簽里面的內容，這里我們指向了data里面的text。
使用render函數的結果和我們之前使用template解析出來的結果是一樣的。render函數是發生在beforeMount和mounted之間的，這也從側面說明了，在beforeMount的時候，$el還只是我們在HTML里面寫的節點，然后到mounted的時候，它就把渲染出來的內容掛載到了DOM節點上。這中間的過程其實是執行了render function的內容。
在使用.vue文件開發的過程當中，我們在里面寫了template模板，在經過了vue-loader的處理之后，就變成了render function，最終放到了vue-loader解析過的文件里面。這樣做有什么好處呢？原因是由于在解析template變成render function的過程，是一個非常耗時的過程，vue-loader幫我們處理了這些內容之后，當我們在頁面上執行vue代碼的時候，效率會變得更高。
beforeMount在有了render function的時候才會執行，當執行完render function之后，就會調用mounted這個鉤子，在mounted掛載完畢之后，這個實例就算是走完流程了。
后續的鉤子函數執行的過程都是需要外部的觸發才會執行。比如說有數據的變化，會調用beforeUpdate，然后經過Virtual DOM，最后updated更新完畢。當組件被銷毀的時候，它會調用beforeDestory，以及destoryed。
這就是vue實例從新建到銷毀的一個完整流程，以及在這個過程中它會觸發哪些生命周期的鉤子函數。那說到這兒，可能很多童鞋會問，鉤子函數是什么意思？
鉤子函數，其實和回調是一個概念，當系統執行到某處時，檢查是否有hook，有則回調。說的更直白一點，每個組件都有屬性，方法和事件。所有的生命周期都歸于事件，在某個時刻自動執行。
其實，當你跟面試官闡述到這兒的時候，面試官基本上已經滿意你的回答了，隱約看到了你的技術功底。當然，如果你還想更進一步，讓面試官對你刮目相看，達到加分的效果，你還可以這樣說：
在這個過程當中，Vue為我們提供了renderError方法，這個方法只有在開發的時候它才會被調用，在正式打包上線的過程當中，它是不會被調用的。它主要是幫助我們調試render里面的一些錯誤。
renderError (h, err) {
return h("div", {}, err.stack)
}
有且只有當render方法里面報錯了，才會執行renderError方法。
所以我們主動讓render函數報個錯：
render (h) {
throw new TypeError("render error")
}
如圖所示，渲染出來的就是Error信息了。還有一點，renderError只有在本組件的render方法報錯的情況下它才會被調用。
寫在最后這就是關于vue的生命周期的一個詳細的闡述，大家只需要記住在vue的生命周期里有哪些鉤子函數，它們分別是在什么情況下會被調用，以及其中的一些原理即可。
以后如果有人問你“如何解釋vue的生命周期才能令面試官滿意”這個問題，你可以直接把這篇文章甩給他就OK了。
最后祝所有面試的童鞋順利拿到OFFER！
歡迎關注我的后續文章，文章預告：
eslint的錯誤修復小技巧
開發時服務端渲染的配置和原理
使用koa實現node server
......
如何使用pm2以及服務器端的部署
以上內容均會第一時間發布在我的公眾號：閏土大叔 ，歡迎關注。文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94226.html
摘要：記錄下我遇到的面試題，都有大佬分享過，附上各個大佬的文章，總結出其中的主要思想即可。推薦黑金團隊的文章前端緩存最佳實踐推薦名揚的文章淺解強緩存和協商緩存狀態碼重點是等，要給面試官介紹清楚。前言 在這互聯網的寒冬臘月時期，雖說過了金三銀四，但依舊在招人不斷。更偏向于招聘高級開發工程師。本人在這期間求職，去了幾家創業，小廠，大廠廝殺了一番，也得到了自己滿意的offer。 整理一下自己還記得的面試...
摘要：假如你通過閱讀源碼，掌握了對的實現原理，對生態系統有了充分的認識，那你會在面試環節游刃有余，達到晉級阿里的技術功底，從而提高個人競爭力，面試加分更容易拿。 前言 一年一度緊張刺激的高考開始了，與此同時，我也沒閑著，奔走在各大公司的前端面試環節，不斷積累著經驗，一路升級打怪。 最近兩年，太原作為一個準二線城市，各大互聯網公司的技術棧也在升級換代，假如你在太原面試前端崗位，而你的技術庫里若...
摘要：可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。我工作中只用到，對和不怎么熟與的區別相同點都支持指令內置指令和自定義指令都支持過濾器內置過濾器和自定義過濾器都支持雙向數據綁定都不支持低端瀏覽器。 看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是...
摘要：技術一面一面主要考察基礎，有些會有技術筆試，比如騰訊，。騰訊的面試官就很喜歡問，安全，瀏覽器緩存方面的問題，計算機基礎，但是要懂為什么。 這篇文章簡單總結下2018年內我的一些前端面試經歷， 在這簡單分享一下，希望對大家有所啟發。 樓主在深圳，畢業兩年。面的主要是深圳的幾家公司。 包括: 騰訊， 螞蟻金服， Lazada， Shopee, 有贊 等 。 樓主在準備面試前， 想著復習一...
摘要：經歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。現在是面試了家公司左右，有些高頻問題會標記次數總次數，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。 經歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復習，有很多平時也沒怎么用到，導致一開始面試的時候，問的問題...
閱讀 3251·2021-10-13 09:39
閱讀 2013·2021-09-27 13:36
閱讀 3074·2021-09-22 16:02
閱讀 2596·2021-09-10 10:51
閱讀 1578·2019-08-29 17:15
閱讀 1532·2019-08-29 16:14
閱讀 3504·2019-08-26 11:55
閱讀 2549·2019-08-26 11:50
