自定義指令

除了VUE 內(nèi)置指令外，VUE也支持我們自定義注冊(cè)指令，分為局部和全局注冊(cè) 但這些想必大家都不陌生，其中官方API也是寫(xiě)的明明白白 官方API點(diǎn)這里

而且自定義指令也會(huì)極大程度上幫助我們?nèi)粘５木幊?，但這是很有意思的事情出現(xiàn)了，就是鉤子函數(shù)。

先上官方解釋

1.bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

2.inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

3.update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。

4.componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

5.unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

App.vue

main.js

加載

這時(shí)候我們可以判斷首先加載時(shí)會(huì)經(jīng)歷這兩個(gè)鉤子函數(shù)，分別對(duì)應(yīng)第一次綁定，和父元素加載完畢

按下更新按鈕

這時(shí)候我們可以判斷節(jié)點(diǎn)內(nèi)容更新時(shí)會(huì)經(jīng)歷這兩個(gè)鉤子函數(shù)，分別對(duì)應(yīng)更新前，和更新后

按下關(guān)閉

階段銷(xiāo)毀時(shí)經(jīng)歷unbind鉤子函數(shù)

按下加載

再次看下加載

這時(shí)我們應(yīng)該可以弄明白鉤子函數(shù)

但其實(shí)大多數(shù)情況 我們只希望節(jié)點(diǎn)在加載和更新時(shí)發(fā)生同樣的事情，而忽略其它鉤子函數(shù),可以這么寫(xiě)