九.钩子函数

钩子函数

一.钩子函数

一个指令定义对象提供几个钩子函数:

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来进行