理解vue的生命周期鉤子

qpal 發(fā)布于2019-08-20 17:41 / 2556人閱讀

摘要：實(shí)例有一個(gè)完整的生命周期，從開(kāi)始創(chuàng)建到實(shí)例銷(xiāo)毀整個(gè)過(guò)程，都提供了事件鉤子，給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。例如上面的例子中，初始化的時(shí)候，會(huì)賦值給如下圖當(dāng)執(zhí)行時(shí)，里邊的方法就會(huì)執(zhí)行比如例子中的

Vue 實(shí)例有一個(gè)完整的生命周期，從開(kāi)始創(chuàng)建到實(shí)例銷(xiāo)毀整個(gè)過(guò)程，vue都提供了事件鉤子，給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。

官網(wǎng)提供的生命周期圖示：

例如，在實(shí)例掛載完成，模版中的html渲染到頁(yè)面之后，可以通過(guò)mounted進(jìn)行我們自定義的事件：

var vm = new Vue({
  data: {
    a: “實(shí)例掛載完成”
  },
  mounted: function () {
      console.log(this.a)
  }
})

生命周期鉤子的使用方法就是在vue實(shí)例化的參數(shù)中，添加上mounted，beforeMount等方法。

那么，他們究竟是如何實(shí)現(xiàn)的呢？

查看vue源碼，會(huì)發(fā)現(xiàn)在vue實(shí)例初始化（_init）、掛載（$mount ）等過(guò)程中，都調(diào)用了一個(gè)叫callHook的方法，如下圖：

vue在處理生命周期的lifecycle.js（src/core/instance/lifecycle.js）中定義了一個(gè)callHook函數(shù)：

export function callHook (vm: Component, hook: string) {
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm)
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit("hook:" + hook)
  }
}

可以看出，vue實(shí)例在各個(gè)生命周期階段，都會(huì)去調(diào)用鉤子callHook，當(dāng)options中有對(duì)應(yīng)的內(nèi)容時(shí)，就會(huì)去運(yùn)行相關(guān)的方法。

例如上面的例子中，vue初始化的時(shí)候，會(huì)賦值給$options

vm.$options如下圖：

當(dāng)執(zhí)行callHook(vm, ‘mounted’)時(shí)，$options.mounted里邊的方法就會(huì)執(zhí)行

比如例子中的 console.log(this.a)

云服務(wù)器 GPU云服務(wù)器線程的生命周期 bug的生命周期 activity的生命周期 ios應(yīng)用的生命周期

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

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

相關(guān)文章

詳解vue生命周期

摘要：注意看下此時(shí)還是沒(méi)有選項(xiàng)鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當(dāng)發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對(duì)應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。首先，每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程,這個(gè)過(guò)程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會(huì)很熟悉： showImg(https://segmentfau...

svtter 2019-08-21 16:47 評(píng)論0 收藏0
Vue中父子組件生命周期執(zhí)行順序初探

摘要：結(jié)論父子組件生命周期鉤子的執(zhí)行順序遵循從外到內(nèi)，然后再?gòu)膬?nèi)到外，不管嵌套幾層深，也遵循這個(gè)規(guī)律。組件化的設(shè)計(jì)思路大抵相同，中父子組件生命周期鉤子執(zhí)行順序，具體沒(méi)做探究，但是值得一提的是父組件的也是晚于子組件執(zhí)行的。如今前端框架都流行組件化，頁(yè)面元素都可以使用組件進(jìn)行高度概括，那么處理組件之間的關(guān)系就如同處理頁(yè)面架構(gòu)一樣重要。正確理解組件之間的關(guān)系，才能讓代碼按照我們與預(yù)料方式工作。最...

Yumenokanata 2019-08-23 10:41 評(píng)論0 收藏0
Vue 實(shí)例中的生命周期鉤子詳解

摘要：實(shí)例在文檔中經(jīng)常會(huì)使用這個(gè)變量名表示實(shí)例，在實(shí)例化時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項(xiàng)。通俗說(shuō)就是實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是生命周期。 Vue 實(shí)例中的生命周期鉤子 Vue 框架的入口就是 Vue 實(shí)例，其實(shí)就是框架中的 view model ，它包含頁(yè)面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程...

gityuan 2019-08-20 15:16 評(píng)論0 收藏0
如何解釋vue的生命周期才能令面試官滿意？

摘要：如果你只是簡(jiǎn)單羅列出這幾個(gè)鉤子函數(shù)的名稱(chēng)，不具體深入闡述的話，你這樣的回答很難令面試官滿意。那么接下來(lái)，閏土大叔將手摸手教你如何深入淺出地說(shuō)出令面試官滿意的有亮點(diǎn)的回答。當(dāng)面試官問(wèn)：談?wù)勀銓?duì)vue的生命周期的理解，聽(tīng)到這句話你是不是心里暗自竊喜：這也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updat...

liangdas 2019-08-22 16:18 評(píng)論0 收藏0
標(biāo)注圖+部分舉例聊聊Vue生命周期

摘要：天王蓋地虎鉤子事件得到的結(jié)果是小總結(jié)實(shí)例創(chuàng)建完成后，我們能讀取到數(shù)據(jù)的值，但是還沒(méi)生成，掛載屬性還不存在。此時(shí)的階段解讀為掛載完畢階段我們?cè)俅蛴∠麓藭r(shí)看看鉤子事件得到的結(jié)果是可見(jiàn)，已經(jīng)成功渲染成里面對(duì)應(yīng)的值天王蓋地虎了。你不需要立馬弄明白所有的東西，不過(guò)隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來(lái)越高。現(xiàn)在項(xiàng)目中遇到了，好好回頭總結(jié)一波Vue生命周期，以后用到的時(shí)候再來(lái)翻翻。啥叫V...

Aceyclee 2019-08-23 12:36 評(píng)論0 收藏0