九.鉤子函數

鉤子函數

一.鉤子函數

一個指令定義對象提供幾個鉤子函數:

1. bind: 只調用一次, 指令第一次綁定到元素時立即執行這個bind函數. 只能綁定一次, 所以只能調用一次.
2. inserted: 表示元素插入到父節點(DOM)中的時候, 會執行inserted函數. (僅保證父節點存在, 但不一定已被插入文檔中)
3. update: 當VNode更新的時候, 會執行updated, 可能會發生多次. 但是可能發生在其子VNode更新之前. 指令的值可能發生了改變, 也可能沒有.
4. componentUpdated: 指令所在組件的VNode及其子VNode全部更新後調用.
5. unbind: 只調用一次, 指令與元素解綁時調用.

二.鉤子函數參數

指令鉤子函數會被傳入以下參數:

• el: 指令所綁定的元素, 可以用來直接操作DOM.
• binding: 一個對象, 包含一下屬性:
  • name: 指令名字, 不包括v-前綴.
  • value: 指令的綁定值. 例如: v-my-directive="1 + 1"中, 綁定值爲2
  • oldValue: 指令綁定的前一個值. 僅在update和componentUpdated鉤子中可用. 無論值是否改變都可用.
  • expression: 字符串形式的指令表達式. 例如 v-my-directive="1+1"中, 表達式爲"1+1".
  • arg: 傳給指令的參數, 可選.
• vnode: Vue編譯生成的虛擬節點.
• oldVnode: 上一個虛擬節點, 僅在update和componentUpdated鉤子中使用.

除了el之外, 其它參數都應該是隻讀的, 切勿進行修改. 如果需要鉤子之間共享數據, 建議通過元素的dataset來進行