Vue鉤子函式生命週期例項詳解

2021-09-01 03:02:31 字數 462 閱讀 7173

vue生命週期簡介

vue例項有乙個完整的生命週期,也就是從開始建立、初始化資料、編譯模板、掛載dom、渲染→更新→渲染、解除安裝等一系列過程,我們稱這是vue的生命週期。通俗說就是vue例項從建立到銷毀的過程,就是生命週期。

在vue的整個生命週期中,它提供了一系列的事件,可以讓我們在事件觸發時註冊js方法,可以讓我們用自己註冊的js方法控制整個大局,在這些事件響應方法中的this直接指向的是vue的例項。

vue.js生命週期通過下面這個圖很容易理解,如下:

從上圖可以很明顯的看出現在vue2.0和vue1.0的主要區別以及vue2.0都包括了哪些生命週期的鉤子函式了。

生命週期**

對於執行順序和什麼時候該執行哪個鉤子函式,看上面兩個圖基本有個了解了。下面的案例將通過**去看看鉤子函式的執行,讓大家更清晰透徹的理解vue的生命週期。

下面**可以直接複製到專案中的html執行

複製**

vue生命週期鉤子函式詳解

先放一張官網生命週期圖 vue有8種生命週期函式 鉤子函式 觸發的行為 在此階段可以做的事情 beforecreadted vue例項的掛載元素 el和資料物件data都為undefined,還未初始化。加loading事件 created vue例項的資料物件data有了,el還沒有 結束load...

vue生命週期鉤子函式詳解

先放一張官網生命週期圖 vue有8種生命週期函式 鉤子函式 觸發的行為 在此階段可以做的事情 beforecreadted vue例項的掛載元素 el和資料物件data都為undefined,還未初始化。加loading事件 created vue例項的資料物件data有了,el還沒有 結束load...

vue例項的生命週期 鉤子函式

每個 vue 例項在被建立時都要經過一系列的初始化過程 例如,需要設定資料監聽 編譯模板 將例項掛載到 dom 並在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己的 的機會。vue有8種生命週期函式 鉤子函式 觸發的行為 在此階段可以做...