亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

liangdas / 504人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

有且只有當(dāng)render方法里面報(bào)錯(cuò)了，才會(huì)執(zhí)行renderError方法。

所以我們主動(dòng)讓render函數(shù)報(bào)個(gè)錯(cuò)：

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

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

寫在最后

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

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

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

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

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

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

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

......

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

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

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

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

相關(guān)文章

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

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

    shinezejian 評論0 收藏0

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

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

    xiaoqibTn 評論0 收藏0

  • Vue面試中，經(jīng)常會(huì)被問到的面試題/Vue知識(shí)點(diǎn)整理

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

    mengbo 評論0 收藏0

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

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

    Yujiaao 評論0 收藏0

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

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

    DevWiki 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<