理解vue的生命周期鉤子

qpal 發布于2019-08-20 17:41 / 2547人閱讀

摘要：實例有一個完整的生命周期，從開始創建到實例銷毀整個過程，都提供了事件鉤子，給我們提供了執行自定義邏輯的機會。例如上面的例子中，初始化的時候，會賦值給如下圖當執行時，里邊的方法就會執行比如例子中的

Vue 實例有一個完整的生命周期，從開始創建到實例銷毀整個過程，vue都提供了事件鉤子，給我們提供了執行自定義邏輯的機會。

官網提供的生命周期圖示：

例如，在實例掛載完成，模版中的html渲染到頁面之后，可以通過mounted進行我們自定義的事件：

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

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

那么，他們究竟是如何實現的呢？

查看vue源碼，會發現在vue實例初始化（_init）、掛載（$mount ）等過程中，都調用了一個叫callHook的方法，如下圖：

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

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實例在各個生命周期階段，都會去調用鉤子callHook，當options中有對應的內容時，就會去運行相關的方法。

例如上面的例子中，vue初始化的時候，會賦值給$options

vm.$options如下圖：

當執行callHook(vm, ‘mounted’)時，$options.mounted里邊的方法就會執行

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

云服務器 GPU云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83774.html

詳解vue生命周期

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

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

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

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

摘要：實例在文檔中經常會使用這個變量名表示實例，在實例化時，需要傳入一個選項對象，它可以包含數據模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創建到銷毀的過程，就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業務處理邏輯、數據模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程...

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

摘要：如果你只是簡單羅列出這幾個鉤子函數的名稱，不具體深入闡述的話，你這樣的回答很難令面試官滿意。那么接下來，閏土大叔將手摸手教你如何深入淺出地說出令面試官滿意的有亮點的回答。當面試官問：談談你對vue的生命周期的理解，聽到這句話你是不是心里暗自竊喜：這也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updat...

liangdas 2019-08-22 16:18 評論0 收藏0
標注圖+部分舉例聊聊Vue生命周期

摘要：天王蓋地虎鉤子事件得到的結果是小總結實例創建完成后，我們能讀取到數據的值，但是還沒生成，掛載屬性還不存在。此時的階段解讀為掛載完畢階段我們再打印下此時看看鉤子事件得到的結果是可見，已經成功渲染成里面對應的值天王蓋地虎了。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。現在項目中遇到了，好好回頭總結一波Vue生命周期，以后用到的時候再來翻翻。啥叫V...

Aceyclee 2019-08-23 12:36 評論0 收藏0