vue常見鉤子函數(shù)

“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){ }

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容