Vue生命周期渲染dom歷程


Vue實例有一個完整的生命周期,也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程,就是生命周期。

每一個組件或者實例都會經歷一個完整的生命周期,總共分為三個階段:初始化、運行中、銷毀。

實例、組件通過new Vue() 創建出來之后會初始化事件和生命周期,然后就會執行beforeCreate鈎子函數,這個時候,數據還沒有掛載呢,只是一個空殼,無法訪問到數據和真實的dom,一般不做操作

掛載數據,綁定事件等等,然后執行created函數,這個時候已經可以使用到數據,也可以更改數據,在這里更改數據不會觸發updated函數,在這里可以在渲染前倒數第二次更改數據的機會,不會觸發其他的鈎子函數,一般可以在這里做初始數據的獲取

接下來開始找實例或者組件對應的模板,編譯模板為虛擬dom放入到render函數中准備渲染,然后執行beforeMount鈎子函數,在這個函數中虛擬dom已經創建完成,馬上就要渲染,在這里也可以更改數據,不會觸發updated,在這里可以在渲染前最后一次更改數據的機會,不會觸發其他的鈎子函數,一般可以在這里做初始數據的獲取

接下來開始render,渲染出真實dom,然后執行mounted鈎子函數,此時,組件已經出現在頁面中,數據、真實dom都已經處理好了,事件都已經掛載好了,可以在這里操作真實dom等事情...

當組件或實例的數據更改之后,會立即執行beforeUpdate,然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染,一般不做什么事兒

當更新完成后,執行updated,數據已經更改完成,dom也重新render完成,可以操作更新后的虛擬dom

當經過某種途徑調用$destroy方法后,立即執行beforeDestroy,一般在這里做一些善后工作,例如清除計時器、清除非指令綁定的事件等等

組件的數據綁定、監聽...去掉后只剩下dom空殼,這個時候,執行destroyed,在這里做善后工作也可以


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM