簡述Vue生命週期

2021-10-07 22:41:28 字數 879 閱讀 6911

從生到死的特定階段呼叫的方法

ps: 生命週期鉤子 = 生命週期函式 = 生命週期事件

vue生命週期介紹,官網

2.1、建立期間的生命週期方法

beforecreate:方法特點——呼叫時沒有初始化好vue例項中的資料(data)和方法(methods)。即呼叫此方法時還不能呼叫vue例項的資料和方法。

created:——是我們最早能夠訪問vue例項中儲存的資料和方法的地方。

beforemount:——表示vue已經編譯好了最終模板,但是還沒有將最終模板渲染到介面上。

mounted:——表示vue已經完成了模板的渲染,表示我們已經可以拿到介面上渲染之後的內容了。

2.2、執行期間的生命週期方法

beforeupdate:——表示vue例項中儲存的資料被修改了。此時介面還未修改

注意點:只有儲存的資料被修改了才會呼叫beforeupdate,否則不會呼叫.

在呼叫beforeupdate的時候,資料已經更新了,但是介面還沒有更新。

updated:——資料和介面都同步更新之後就會呼叫updated

2.3、銷毀期間的生命週期方法

beforedestroy:——表示當前元件即將被銷毀了

注意點:只要元件不被銷毀,那麼beforedestroy就不會呼叫

beforedestroy函式是我們最後能夠訪問到元件資料和方法的函式

destroyed:——表示當前元件已經被銷毀了

注意點:只要元件不被銷毀,那麼destroyed就不會呼叫

不要在這個生命週期方法中再操作元件中的資料和方法

3、整理一下

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生命週期

一 初始化階段 1.第乙個執行生命週期函式,注意 在這個函式執行的時候vue例項僅僅完成內部事件和使用生命週期方法初始化 beforecreate 2.第二個執行生命週期函式,注意 在這個函式執行的時候vue例項已經完成自定義data methods computed等屬性初始化以及語法校驗 cre...

Vue之生命週期簡述

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