“Vue鉤子函數(shù)就是指在一個Vue實例從創(chuàng)建到銷毀的過程自動執(zhí)行的函數(shù)?!?/p>
引用知乎 SpiritTracks 作者的話 “ 就是在生命周期執(zhí)行流程中預(yù)留的一個能讓我們執(zhí)行自己代碼的地方。叫鉤子函數(shù),很形象的,鉤子鉤子,掛載我們自己的東西” 我感覺說的很道理
那么vue的 鉤子函數(shù)都有那些呢
一、生命周期鉤子函數(shù)
(1)beforeCreate() 實例創(chuàng)建前觸發(fā)
(2)created() 實例創(chuàng)建完成,
(3)beforeMount() 模板渲染前,可以訪問數(shù)據(jù),模板編譯完成,虛擬DOM已經(jīng)存在
(4)mounted() 模板渲染完成,可以拿到DOM節(jié)點和數(shù)據(jù)
(5)beforeUpdate() 更新前
(6)updated() 更新完成
(7)activated() 激活前
(8)deactivated() 激活后
(9)beforeDestroy() 銷毀前
(10)destroyed() 銷毀后
二、自定義指令directives的鉤子函數(shù)
(1)bind() 綁定指令到元素上,只執(zhí)行一次。
(2)inserted() 綁定了指令的元素插入到頁面中展示時調(diào)用,很常用。
(3)update() 所有組件節(jié)點更新時調(diào)用
(4)componentUpdated 指令所在的節(jié)點及其子節(jié)點全部更新完成后調(diào)用。
(5)unbind() 解除指令和元素的綁定,只執(zhí)行一次。
三、路由導(dǎo)航 / 路由守衛(wèi) 鉤子函數(shù)
(1)全局守衛(wèi)
①前置:router.beforeEach((to,from,next)=>{ })
②后置:router.afterEach((to,from)=>{ })
(2)路由獨享守衛(wèi)
beforeEnter:(to,from,next)=>{ }
(3)導(dǎo)航守衛(wèi)
①beforeRouteEnter(to,from,next){ }
②beforeRouteLeave(to,from,next){ }