Vue生命周期是什么
發表時間:2024-01-03 來源:明輝站整理相關軟件相關文章人氣:
[摘要]<p id="app">{{name}}</p>Vue把整個生命周期劃分為創建、掛載、更新、銷毀等階段,每一個階段都會給一些‘鉤子’讓我們來做一些我們想實現的動作。學習實例的生命周期,能幫助我們理解vue實例的運行機制,更好地合理利用各個鉤子來完成我們的...
<p id="app">
{{name}}
</p>
Vue把整個生命周期劃分為創建、掛載、更新、銷毀等階段,每一個階段都會給一些‘鉤子’讓我們來做一些我們想實現的動作。學習實例的生命周期,能幫助我們理解vue實例的運行機制,更好地合理利用各個鉤子來完成我們的業務代碼。
1.beforeCreate:此階段為實例初始化之后,此時的數據觀察和事件配置都還沒有準備好,而此時的實例中的data和el還是underfined狀態,不可用的
2.createD: beforeCreate之后緊接著的鉤子就是創建完畢created,此時我們能讀取到data的值,但是DOM還沒有生成,所以屬性el還是不存在的。
3.beforeMount:此時的$el成功關聯到我們指定的DOM節點<p id="app">{{name}}</p>,但此時{{}}里邊的name還沒有唄成功地渲染成我們DATA中的數據。
4.mounted:掛載完畢階段,到了這個階段數據就會被成功渲染出來。
5.beforeUpdate:當修改Vue實例的data時,Vue就會自動幫我們更新渲染視圖,在這個過程中,Vue提供了beforeUpdate的鉤子給我們,在檢測到我們要修改數據的時候,更新渲染視圖之前就會觸發鉤子beforeUpdate。html片段代碼我們加上ref屬性,用于獲取DOM元素。
beforeUpdate(){
let name = this.$refs.app.innerHTML;
}
而在此階段,視圖并未重新渲染更新。
6.updated:此階段為更新渲染視圖之后,此時再讀取視圖上的內容,已經是最新的內容。
updated(){
let name = this.$refs.app.innerHTML;
},
7.beforeDestroy:調用實例的destroy()方法可以銷毀當前的組件,在銷毀之前,會觸發beforeDestroy鉤子。
8.destroyed:成功銷毀之后,會觸發destroyed鉤子,此時該實例與其他實例的關聯已經被清除,它與視圖之間也被解綁,此時再修改name的值,試圖不在更新,說明實例成功被銷毀了。



以上就是Vue生命周期是什么的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。