當前元件在建立到銷毀的過程的一系列過程,稱為生命週期
1.初始化
2.執行中
3.銷毀
初始化階段
beforecreate
元件建立前
data,rdom(真實dom)獲取不到
意義:是乙個事件和生命週期的準備階段
created
元件建立結束
data: 獲取到了
rdom: 沒獲取到
意義:獲取資料(非同步資料獲取請求)
beforemount
開始掛在元件
data: 獲取到了
rdom:沒獲取到
意義:獲取資料(非同步資料獲取請求)
*作用:為元件的裝載做準備工作,它看配置項中有沒有el,如果template不存在,就手動裝載,如果存在,就利用render函式進行渲染,這裡的渲染是準備進行,
mounted
元件掛在結束
data,rdom:都能獲取到
意義:可以獲取到dom,可以獲取到資料,生成了真實dom,dom的操作和第三方例項化可以進行了,獲取資料
beforeupdate
資料(元件)更新前的準備
data,rdom:都獲取到了
這個鉤子函式裡,只有資料改變了才能執行,
生成新的 vdom , 然後通過diff演算法進行兩次vdom 對比(都是內部進行的),所以在真實專案中一般不適用
updated
資料(元件)更新完畢
通過render函式將vdom渲染了真實dom,然後驅動vue進行試圖的更新
動態資料的渲染,進行dom操作(第三方庫的例項化)
beforedestory
資料(元件)即將銷毀
destoryed
資料(元件)銷毀完畢
元件銷毀的兩種方式
這兩個鉤子函式執行的是一樣的功能,主要是善後工作,常用來清除一些計時器和方法以及第三方例項
vue生命週期
beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...
vue生命週期
vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...
Vue 生命週期
import vue from vue el root 沒有的話,使用render,繼續沒有,就把el的outerhtml編譯成模板 template temp data beforecreate created el是原來的el beforemount 渲染函式 render h this.tex...