Vue基礎(Vue的生命週期方法)

2021-10-05 16:52:50 字數 1427 閱讀 2504

• 從new vue的建立到銷毀的過程是生命週期

• 生命週期: vue是乙個建構函式,當執行這個函式時,相當於初始化vue例項;

在建立例項過程中,需要設定資料監聽,編譯模板,將例項掛載到dom上,

資料更新能夠讓dom也更新,在這個初始化,又會在不同階段預設呼叫一些函式執行,

這些函式就是生命週期的鉤子函式;

• 生命週期鉤子函式,能夠讓咱們在初始化例項時,新增自己的**;

• 生命週期的鉤子函式中的this,會預設指向vue的例項

• beforecreate

• 在這個鉤子函式中,不能獲取data中的資料

• 這個函式不能操作dom

• 在這個鉤子函式執行之前初始化事件以及生命週期

• created

• created : 這是乙個鉤子函式; 當new vue時,沒有渲染真實的dom之前,會執行這個鉤子函式created;請求到資料立即對data中的資料賦值,那麼當編譯dom結構時,採用最新的資料編譯;減少dom的渲染;一般情況下;請求資料都是在created中執行獲取資料,( 鉤子函式中的this都指向vue的例項)

• 不能操作dom

• 可以獲取data的資料

• 可以傳送請求

• beforemount

• 執行這個鉤子函式之前判斷是否有el,template,編譯vue

• mounted

• 掛載: 把vue例項生成的虛擬的dom轉成真實的dom,放在了頁面中,這就是掛載;

• 編譯出的dom把原有的dom替換完畢;

• 可以獲取最終的dom元素

• beforeupdate

• 當資料更新時,會呼叫beforeupdate 和updated鉤子函式;上面四個不再執行

• 更新資料之前執行

• updated

• 資料更新,虛擬的dom更新,然後更新真實的dom;最後觸發這個函式

• beforedestroy

• 銷毀之前執行

• destroyed

• 銷毀子元件,銷毀觀察者,事件監聽者

• 元素的事件還在,但是更改資料不會再讓檢視進行更新了;

• activated

• 當快取元件有被顯示出來時,會觸發這個鉤子函式

• deactivated

• 當快取的元件隱藏時,會觸發這個鉤子函式;

• errorcaptured

• 當子孫元件出錯時,會呼叫這個鉤子函式

• 此鉤子會收到三個引數:錯誤物件、發生錯誤 的 元件例項以及乙個包含錯誤**資訊的字串。

此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

vue生命週期方法

vue生命週期圖示 來自李南江老師的圖 建立期間的生命週期方法 beforecreate 在呼叫beforecreate的時候,vue例項剛剛被建立出來,此時還未初始化好vue例項中的資料和方法,所以還不能訪問vue例項中儲存的資料和方法 created 在呼叫created的時候,是我們最早能夠訪...

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...