談一下對VUE生命週期的理解

2021-10-19 08:46:07 字數 981 閱讀 9753

new vue( ) //執行了vue建構函式

init events&lifecycle //初始化例項

執行生命週期鉤子beforecreat()

init injections&reactivity //建立例項,配置data observer、computed properties,methods, watch/event callbacks

執行生命週期鉤子created()//通常初始化某些屬性值,然後再渲染成檢視。

檢視是否配置了el(例項即將要掛載到哪個dom上),沒有的話就等vm.$mount(el) 手動地掛載乙個未掛載的例項

檢視有沒有配置template,沒有就將el的html模板編譯作為template,放進渲染函式

執行生命週期鉤子beforemount()

建立例項的$el屬性,將例項掛載到真正的dom上

執行生命週期鉤子mounted()//在這之後頁面才渲染出來//初始化頁面完成後,再對html的dom節點進行一些需要的操作

當有資料需要更新:

執行生命週期鉤子beforeupdate() //資料更新時呼叫,發生在虛擬 dom 打補丁之前//這裡適合在更新之前訪問現有的 dom,比如手動移除已新增的事件***。

執行生命週期鉤子updated()//由於資料更改導致的虛擬 dom 重新渲染和打補丁,在這之後會呼叫該鉤子。//大多數情況下應該避免使用

當使用了keep-alive時:

執行生命週期鉤子actived() //被 keep-alive 快取的元件啟用時呼叫。

執行生命週期鉤子deactived() //被 keep-alive 快取的元件停用時呼叫。

當要銷毀元件時:

執行生命週期鉤子beforedestroy() //例項銷毀之前呼叫。在這一步,例項仍然完全可用。

執行生命週期鉤子destroy()//例項銷毀後呼叫。該鉤子被呼叫後,對應 vue 例項的所有指令都被解綁,所有的事件***被移除,所有的子例項也都被銷毀。

對Vue例項生命週期的理解

vue作為如今前端開發主流框架 其中還有angular和react 之一,不僅深受廣大前端工程師的喜愛,也成為了很多人想要入門前端的首選框架。究其緣由,還是因為其相對於另外兩個框架開發更加簡單,上手更加容易。最近,我也開始接觸一些前端知識,對vue框架有一點了解,那今天就談一談對vue例項生命週期的...

vue生命週期理解

關於vue面試,最常問到的就是vue的生命週期,也看過很多關於如何回答過這個問題的解答,自己也有所總結,就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式,分別是 activated與deacti...

Vue 生命週期的理解

最近做了幾個vue的專案,寫寫對生命週期的理解,先看圖 這些圖是網路的,侵權必刪beforecreate 元件剛建立,資料和dom都未初始化,我們在beforecreate的時候千萬不要去修改data裡面賦值的資料,最早也要放在created裡面去做 新增一些行為此時的this,並不會指向例項物件 ...