vue中的生命週期鉤子函式

2021-10-04 09:01:26 字數 1442 閱讀 6144

生命週期

元件從建立到銷毀的一系列過程叫做生命週期

而vue在生命週期裡面提供了一些函式(鉤子函式),可以在內部實現一些業務邏輯

元件的生命週期鉤子函式大概可以分為三個階段

1.初始化階段 beforecreate created beforemount mounted

2.正在執行階段 beforeupdate updated

3.銷毀的階段 beforedestroy destroyed

1.初始化階段

元件或這例項在new 之後開始他的生命週期,例項化之後,內部會做一些初始化事件和生命週期相關的配置

//建立乙個新的全域性元件

vue.component('hello',

}})

上面是初始化的元件

同時初始化的時候會立馬執行 beforecreate 這個鉤子函式`

beforecreate()
下乙個階段就是 created 鉤子函式

created()
到這裡的時候 例項會有乙個分支判斷是否指向了el選項

new vue()
如果沒指定就會從 vm.$mount(el)中找指定的el

new vue().mount(el)
當找到指定的el後 就會判斷是否指定template選項

如果指定了 就會把template選項編譯到render函式中

如果沒指定 就會將el外部的html當作template進行編譯

也就是說元件或者例項去查詢各自的模板,然後將其編譯成虛擬dom,即將放入render函式中做初始化渲染的操作。

編譯完就會進入到

beforemount 這個鉤子函式裡面

beforemount()
在此已經生成好了虛擬的dom 然後在render函式裡面替換對應的el 渲染成真實的dom節點

相當於在render函式裡面做了乙個初始化渲染的操作

接下來就是mounted的階段

mounted()
2.此時初始化階段就已經完成接下來,就到了執行的階段

beforeupdate()
然後這裡就會生成新的虛擬dom 與原來的 虛擬dom通過diff演算法進行對比 然後有不一樣的地方就會進行重新渲染真實dom

進入到下乙個鉤子函式

update()
3.銷毀的階段

一旦觸發了this.$destroy() 就會觸發銷毀階段的函式

beforedestroy(),

destroyed()

methods:

}

vue生命週期,鉤子函式

一 vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了,總結一下,對官方文件的那張圖簡化一下,就得到了這張圖。二 生命週期 對於執行順序和什麼時候執行,看上面圖基本有個了解了。下面我們將結合 去看看鉤子函式的執行。鉤子函式 1.create 和 mounted...

vue 生命週期(鉤子函式)

new vue 例項物件,下一步進入beforcreate 狀態 當使用new vue 建立物件之前,執行的事件 這裡可以做載入動畫 下一步,進入created 然後,他會檢測是否有el屬性,如果有在檢測template屬性型別,是一段渲染的函式還是一段html 然後就進入了beforemount狀...

vue生命週期鉤子函式

什麼是生命週期?vue中的生命週期指的是 元件 從建立到銷毀乙個過程,在這個過程中,我們在每乙個特定的階段會觸發一些方法 這些方法具備一些功能 我們給這些方法起了個名字叫做 生命週期鉤子函式 元件鉤子 為什麼要學習生命週期?因為我們想在生命週期鉤子中實現專案功能,那麼我們必須知道每乙個鉤子函式的具體...