成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何解釋vue的生命周期才能令面試官滿意？

liangdas / 458人閱讀

摘要：如果你只是簡單羅列出這幾個鉤子函數(shù)的名稱，不具體深入闡述的話，你這樣的回答很難令面試官滿意。那么接下來，閏土大叔將手摸手教你如何深入淺出地說出令面試官滿意的有亮點的回答。

當(dāng)面試官問：“談?wù)勀銓ue的生命周期的理解”，聽到這句話你是不是心里暗自竊喜：這也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 這幾個鉤子函數(shù)么，創(chuàng)建=>掛載=>更新=>銷毀，So easy ?。?！

非也非也。如果你只是簡單羅列出這幾個鉤子函數(shù)的名稱，不具體深入闡述的話，你這樣的回答很難令面試官滿意。如何才能以點帶面深入闡述自己對vue的生命周期理解，從而讓面試官對你留下好印象呢？

別急，閏土大叔來告訴你，下次再碰到這個問題，你可以直接甩給面試官下面這張Image就OK了~

當(dāng)然，甩張Image給面試官這句話肯定是開玩笑的（適度幽默，緩解緊張氣氛）。不過這張流程圖還是有用的，因為它是我從Vue官網(wǎng)上拷貝下來的，只要你能理解了這張圖，也就對Vue的生命周期有了一個大致的了解。那么接下來，閏土大叔將手摸手教你如何深入淺出地說出令面試官滿意的、有亮點的回答。

在談到Vue的生命周期的時候，我們首先需要創(chuàng)建一個實例，也就是在 new Vue ( ) 的對象過程當(dāng)中，首先執(zhí)行了init（init是vue組件里面默認去執(zhí)行的），在init的過程當(dāng)中首先調(diào)用了beforeCreate，然后在injections（注射）和reactivity（反應(yīng)性）的時候，它會再去調(diào)用created。所以在init的時候，事件已經(jīng)調(diào)用了，我們在beforeCreate的時候千萬不要去修改data里面賦值的數(shù)據(jù)，最早也要放在created里面去做（添加一些行為）。

當(dāng)created完成之后，它會去判斷instance（實例）里面是否含有“el”option（選項），如果沒有的話，它會調(diào)用vm.$mount(el)這個方法，然后執(zhí)行下一步；如果有的話，直接執(zhí)行下一步。緊接著會判斷是否含有“template”這個選項，如果有的話，它會把template解析成一個render function ，這是一個template編譯的過程，結(jié)果是解析成了render函數(shù)：

render (h) {
  return h("div", {}, this.text)
}

解釋一下，render函數(shù)里面的傳參h就是Vue里面的createElement方法，return返回一個createElement方法，其中要傳3個參數(shù)，第一個參數(shù)就是創(chuàng)建的div標(biāo)簽；第二個參數(shù)傳了一個對象，對象里面可以是我們組件上面的props，或者是事件之類的東西；第三個參數(shù)就是div標(biāo)簽里面的內(nèi)容，這里我們指向了data里面的text。

使用render函數(shù)的結(jié)果和我們之前使用template解析出來的結(jié)果是一樣的。render函數(shù)是發(fā)生在beforeMount和mounted之間的，這也從側(cè)面說明了，在beforeMount的時候，$el還只是我們在HTML里面寫的節(jié)點，然后到mounted的時候，它就把渲染出來的內(nèi)容掛載到了DOM節(jié)點上。這中間的過程其實是執(zhí)行了render function的內(nèi)容。

在使用.vue文件開發(fā)的過程當(dāng)中，我們在里面寫了template模板，在經(jīng)過了vue-loader的處理之后，就變成了render function，最終放到了vue-loader解析過的文件里面。這樣做有什么好處呢？原因是由于在解析template變成render function的過程，是一個非常耗時的過程，vue-loader幫我們處理了這些內(nèi)容之后，當(dāng)我們在頁面上執(zhí)行vue代碼的時候，效率會變得更高。

beforeMount在有了render function的時候才會執(zhí)行，當(dāng)執(zhí)行完render function之后，就會調(diào)用mounted這個鉤子，在mounted掛載完畢之后，這個實例就算是走完流程了。

后續(xù)的鉤子函數(shù)執(zhí)行的過程都是需要外部的觸發(fā)才會執(zhí)行。比如說有數(shù)據(jù)的變化，會調(diào)用beforeUpdate，然后經(jīng)過Virtual DOM，最后updated更新完畢。當(dāng)組件被銷毀的時候，它會調(diào)用beforeDestory，以及destoryed。

這就是vue實例從新建到銷毀的一個完整流程，以及在這個過程中它會觸發(fā)哪些生命周期的鉤子函數(shù)。那說到這兒，可能很多童鞋會問，鉤子函數(shù)是什么意思？

鉤子函數(shù)，其實和回調(diào)是一個概念，當(dāng)系統(tǒng)執(zhí)行到某處時，檢查是否有hook，有則回調(diào)。說的更直白一點，每個組件都有屬性，方法和事件。所有的生命周期都歸于事件，在某個時刻自動執(zhí)行。

其實，當(dāng)你跟面試官闡述到這兒的時候，面試官基本上已經(jīng)滿意你的回答了，隱約看到了你的技術(shù)功底。當(dāng)然，如果你還想更進一步，讓面試官對你刮目相看，達到加分的效果，你還可以這樣說：

在這個過程當(dāng)中，Vue為我們提供了renderError方法，這個方法只有在開發(fā)的時候它才會被調(diào)用，在正式打包上線的過程當(dāng)中，它是不會被調(diào)用的。它主要是幫助我們調(diào)試render里面的一些錯誤。

renderError (h, err) {
  return h("div", {}, err.stack)
}

有且只有當(dāng)render方法里面報錯了，才會執(zhí)行renderError方法。

所以我們主動讓render函數(shù)報個錯：

render (h) {
  throw new TypeError("render error")
}

如圖所示，渲染出來的就是Error信息了。還有一點，renderError只有在本組件的render方法報錯的情況下它才會被調(diào)用。

寫在最后

這就是關(guān)于vue的生命周期的一個詳細的闡述，大家只需要記住在vue的生命周期里有哪些鉤子函數(shù)，它們分別是在什么情況下會被調(diào)用，以及其中的一些原理即可。

以后如果有人問你“如何解釋vue的生命周期才能令面試官滿意”這個問題，你可以直接把這篇文章甩給他就OK了。

最后祝所有面試的童鞋順利拿到OFFER！

歡迎關(guān)注我的后續(xù)文章，文章預(yù)告：

eslint的錯誤修復(fù)小技巧

開發(fā)時服務(wù)端渲染的配置和原理

使用koa實現(xiàn)node server

......

如何使用pm2以及服務(wù)器端的部署

以上內(nèi)容均會第一時間發(fā)布在我的公眾號：閏土大叔 ，歡迎關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94226.html

相關(guān)文章

  • 【前端面試分享】- 寒冬求職上篇

    摘要：記錄下我遇到的面試題，都有大佬分享過，附上各個大佬的文章，總結(jié)出其中的主要思想即可。推薦黑金團隊的文章前端緩存最佳實踐推薦名揚的文章淺解強緩存和協(xié)商緩存狀態(tài)碼重點是等，要給面試官介紹清楚。前言 在這互聯(lián)網(wǎng)的寒冬臘月時期，雖說過了金三銀四，但依舊在招人不斷。更偏向于招聘高級開發(fā)工程師。本人在這期間求職，去了幾家創(chuàng)業(yè)，小廠，大廠廝殺了一番，也得到了自己滿意的offer。 整理一下自己還記得的面試...

    shinezejian 評論0 收藏0

  • 太原面經(jīng)分享：如何在vue面試環(huán)節(jié)，展示你晉級阿里P6+的技術(shù)功底？

    摘要：假如你通過閱讀源碼，掌握了對的實現(xiàn)原理，對生態(tài)系統(tǒng)有了充分的認識，那你會在面試環(huán)節(jié)游刃有余，達到晉級阿里的技術(shù)功底，從而提高個人競爭力，面試加分更容易拿。 前言 一年一度緊張刺激的高考開始了，與此同時，我也沒閑著，奔走在各大公司的前端面試環(huán)節(jié)，不斷積累著經(jīng)驗，一路升級打怪。 最近兩年，太原作為一個準(zhǔn)二線城市，各大互聯(lián)網(wǎng)公司的技術(shù)棧也在升級換代，假如你在太原面試前端崗位，而你的技術(shù)庫里若...

    xiaoqibTn 評論0 收藏0

  • Vue面試中，經(jīng)常會被問到的面試題/Vue知識點整理

    摘要：可以在該鉤子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。我工作中只用到，對和不怎么熟與的區(qū)別相同點都支持指令內(nèi)置指令和自定義指令都支持過濾器內(nèi)置過濾器和自定義過濾器都支持雙向數(shù)據(jù)綁定都不支持低端瀏覽器。 看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是...

    mengbo 評論0 收藏0

  • 2018年, 我的前端面試復(fù)盤

    摘要：技術(shù)一面一面主要考察基礎(chǔ)，有些會有技術(shù)筆試，比如騰訊，。騰訊的面試官就很喜歡問，安全，瀏覽器緩存方面的問題，計算機基礎(chǔ)，但是要懂為什么。 這篇文章簡單總結(jié)下2018年內(nèi)我的一些前端面試經(jīng)歷， 在這簡單分享一下，希望對大家有所啟發(fā)。 樓主在深圳，畢業(yè)兩年。面的主要是深圳的幾家公司。 包括: 騰訊， 螞蟻金服， Lazada， Shopee, 有贊 等 。 樓主在準(zhǔn)備面試前， 想著復(fù)習(xí)一...

    Yujiaao 評論0 收藏0

  • 2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗）

    摘要：經(jīng)歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會?，F(xiàn)在是面試了家公司左右，有些高頻問題會標(biāo)記次數(shù)總次數(shù)，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。 經(jīng)歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復(fù)習(xí)，有很多平時也沒怎么用到，導(dǎo)致一開始面試的時候，問的問題...

    DevWiki 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<