簡述vue生命週期

2021-10-20 11:27:13 字數 1435 閱讀 3613

（一）初始化階段

1.第乙個執行生命週期函式,注意: 在這個函式執行的時候vue例項僅僅完成內部事件和使用生命週期方法初始化

beforecreate()
2.第二個執行生命週期函式,注意: 在這個函式執行的時候vue例項已經完成自定義data、methods、computed等屬性初始化以及語法校驗

created()
3.第三個執行的生命週期函式 注意:在這個函式執行的時候vue例項僅僅是將el屬性指向的html編譯成vue模板,此時並沒有完成模板內容賦值

beforemount()
（二）執行階段

5.第五個執行的生命週期函式 注意: 在這個函式執行的時候,vue例項中data資料發生改變,但是頁面中資料還是原始資料

beforeupdate()
6.第六個執行的生命週期函式 注意: 在這個函式執行的時候,vue例項中data資料和頁面中資料已經一致了

update()
（三）銷毀階段

7.第七個執行的生命週期方法 注意: 在這個函式執行的時候 vue例項僅僅是開始銷毀 data methods …

beforedestroy()
8.第八個執行的生命週期方法 注意: 在這個函式執行的時候 vue例項上的所有數 events child component(子元件) listener監聽機制都將被銷毀

destroyed()
區域性元件的生命週期也差不多

beforecreate()


,//元件開始初始化，僅僅註冊元件自己時間和生命週期函式，


created()


,//元件以及諸如data methods computed 相關資料方法


beforemount()


,//將template中指向html編譯vue模板 此時還沒有完成模板中內容渲染


mounted()


,//將template中html編譯模板進行編譯模板進行資料渲染 並且渲染完成的資料在記憶體中形成虛擬dom替換template指向dom


beforeupdate()


,//當元件中data資料發生變化時，會觸發beforeupdate，此時頁面中資料還是原始資料


update()


,//此時頁面中資料和data資料一致


beforedestroy()


,//銷毀vue例項之前觸發方法


destroyed()


,//vue例項已經徹底銷毀 監聽機制 全部消失
學習筆記之vue。。。

感謝小陳老師

vue生命週期簡述

beforecreate this.dat a和th is data 和this.data和t his.el都沒準備好,都是undefined created this.dat a有了，能讀取到 了，但是 dom還 沒載入，this data有了，能讀取到了，但是dom還沒載入，this.data有...

簡述Vue生命週期

從生到死的特定階段呼叫的方法 ps 生命週期鉤子 生命週期函式 生命週期事件 vue生命週期介紹，官網 2.1 建立期間的生命週期方法 beforecreate 方法特點 呼叫時沒有初始化好vue例項中的資料 data 和方法 methods 即呼叫此方法時還不能呼叫vue例項的資料和方法。crea...

Vue之生命週期簡述

vue生命週期是指從vue例項建立到虛擬dom產生再到資料繫結 資料監聽 資料渲染以及銷毀的整個過程。vue例項初始化階段 生命週期的第一步首先是建立vue例項，並且進行初始化。beforecreate 在初始化的時候呼叫了beforecreate,完成了vue例項的生命週期相關屬性的初始化以及事件...