vue生命周期(勾子函式)
開發中用到的八種勾子函式
1.beforeCreate
組件dom創建之前 (此時data、props里的資料還沒有生成是不能使用的)
2.created (在vue專案中較為常用)
組件dom創建完成(此時data、props里的資料已經可以使用了)
3.beforeMount (用的次數較少)
組件dom渲染之前
4.mounted
組件dom渲染完成
5.beforeUpdate
資料更新時呼叫,發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM,比如手動移除已添加的事件監聽器。
6.updated
由于資料更改導致的虛擬 DOM 重新渲染和打補丁,在這之后會呼叫該鉤子。
7.beforeDistroy
實體(組件DOM)銷毀之前呼叫。在這一步,實體仍然完全可用。
該鉤子在服務器端渲染期間不被呼叫。
8.distroyed
實體(組件DOM)銷毀后呼叫。調
3.父子路由組件關系
父組件的頁面
父組件
parent beforeCreate
parent created
parent beforeMount
parent mounted
路由跳轉之后
父組件
parent beforeUpdate
子組件
children beforeCreate
children created
children beforeMount
ch下面我們對上面寫的路由關系中不同的勾子函式執行順序來進行解答
一個路由組件跳轉到另一個路由組件
首先可以發現第一種路由關系與后兩種多執行了兩個勾子函式(beforeDestroy和destoryed),
我們也知道只有在實體(組件DOM)銷毀的時候才會執行這兩個勾子函式;
當A路由組件跳轉到B路由組件的時候當執行到B組件的beforeMount階段時,A路由組件中開始執行beforeDestroy和destoryed這兩個勾子函式,最后執行B組件的mounted,也就是代表B組件正式渲染完成
父子組件與父子路由階段之間的共同點與不同點:
以上這兩種關系我們假設都是從A組件到B組件
共同點
A組件和B組件到最后都會共同顯示在一個頁面上
不同點
在父子組件關系中B組件是在A組件的beforeMount階段開始執行的,當B組件渲染出來時,才開始渲染A組件,
在在父子路由組件關系中B組件是在A組件渲染完成之后才開始執行的,在A組件執行到mounted(資料渲染完成時才開始執行B組件的勾子函式,因為A組件已經渲染完成了,所以說在執行B組件是相當于增加了A組件的虛擬DOM,所以A組件執行了beforeUpdate和updated這兩個勾子函式,
這就是以上三種路由關系,由此可以發現不同的路由關系勾子函式的執行順序也各不相同,掌握了勾子函式在不同路由關系跳轉下的執行順序,會讓您在寫專案的時候少走很多彎路
文章最后發布于: 2020-01-08
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/40558.html
標籤:VOIP技術探討
上一篇:如何搭建ZooKeeper?(zookeeper入門教程)
下一篇:網路故障一般性排查步驟
