Logging directive hooks

Understand directive lifecycle with this tip #23

You've learned in the docs that directives has 5 lifecycle hooks: bind, inserted, update, componentUpdated and unbind. But to understand when it happens and which are the arguments, I created this tiny function to console.log all that:

function logDirective () {
  return 'bind inserted update componentUpdated unbind'.split(' ').reduce(function (acc, val) {
    acc[val] = (el, binding, vnode) => console.info(val, JSON.stringify(binding, false, 2))
    return acc
  }, {})
}

And you simple use it like this:

directives: {
  sample: logDirective()
}

In this example, you can see that the bind and insert hooks are called first. When you type in the input, the update and componentUpdated are called. And finally the unbind hook is executed when you click the checkbox.

open the console to see the hooks

The values from the binding parameters are logged too:
v-sample:bar.foo.baz=”[10, 20]”