How to Use Hook Function of Vue Instruction

In Vue, a series of complex operations can be packaged as one instruction.

What is a complex operation?

My understanding is: the packaging of complex logic functions, the violation of data-driven DOM operations, and the cover-up of some Hack means. We always expect to realize functional logic in the form of operational data.

Hook function

For the definition of custom instructions, Vue2 has five optional hook functions.

bind: Called only once, when the instruction is bound to the element for the first time. With this hook function, you can define an initialization action that is executed once when binding.
inserted: Called when the bound element is inserted into the parent node (called if the parent node exists, not necessarily in document).
update: Called when the template of the bound element is updated, regardless of whether the binding value changes.
componentUpdated: Called when the template where the bound element is located completes one update cycle.
unbind: Called only once, when the instruction is unbound from the element.

Next, define a simple instruction to verify the trigger timing of these hook functions.

template

<div id="app">
 <my-comp v-if="msg" :msg="msg"></my-comp>
 <button @click="update"> Update </button>
 <button @click="uninstall"> Uninstall </button>
 <button @click="install"> Installation </button>
</div>

script

Vue.directive('hello', {
 bind: function (el) {
  console.log('bind')
 },
 inserted: function (el) {
  console.log('inserted')
 },
 update: function (el) {
  console.log('update')
 },
 componentUpdated: function (el) {
  console.log('componentUpdated')
 },
 unbind: function (el) {
  console.log('unbind')
 }
})
var myComp = {
 template: '<h1 v-hello>{{msg}}</h1>',
 props: {
  msg: String
 }
}
new Vue({
 el: '#app',
 data: {
  msg: 'Hello'
 },
 components: {
  myComp: myComp
 },
 methods: {
  update: function () {
   this.msg = 'Hi'
  },
  uninstall: function () {
   this.msg = ''
  },
  install: function () {
   this.msg = 'Hello'
  }
 }
})

When the page loads

bind
inserted

When a component is updated

Click the "Update" button to change the data to trigger the component update.

update
componentUpdated

When uninstalling a component

Click the "uninstall" button, and the data is empty and negative to trigger the component uninstall.

unbind

When reinstalling components,

Click the "Install" button, and the data assignment affirms the judgment to trigger the reinstallation of the component.

bind
inserted

Difference

From the operation of the case, we have a preliminary understanding of the triggering opportunities of the five hook functions. What is in doubt is the difference between bind and inserted, update and componentUpdated.

bind and inserted

According to the document, inserted is called when inserting the parent node for a test.

bind: function (el) {
 console.log(el.parentNode) // null
 console.log('bind')
},
inserted: function (el) {
 console.log(el.parentNode) // <div id="app">...</div>
 console.log('inserted')
}

Output the parent node in two hook functions: null when bind, and parent node exists when inserted.

update and componentUpdated

About the introduction of these two, from the word point of view, it feels that the component update cycle is related, and continue to verify.

update: function (el) {
 console.log(el.innerHTML) // Hello
 console.log('update')
},
componentUpdated: function (el) {
 console.log(el.innerHTML) // Hi
 console.log('componentUpdated')
}

No problem, update and componentUpdated are the difference between before and after the component update.

Conclusion

The document is right...
Demo

Best practices

According to different requirements, we should choose the appropriate time to initialize the instruction, update the instruction call parameters and release the memory occupation when the instruction exists.

A more common scenario is to extend component functionality by wrapping an independent third-party library with instructions. However, a robust library usually includes: initializing instances, updating parameters, and releasing instance resource occupancy.

Vue.directive('hello', {
 bind: function (el, binding) {
  //  In  bind  Initialize library instances in hooks 
  //  If you need to use a parent node, you can also use the  inserted  Execute in hook 
  el.__library__ = new Library(el, binding.value)
 },
 update: function (el, binding) {
  //  Template update means that the parameters of instructions may be changed, and the parameters of library instances can be updated here 
  //  Use as appropriate  update  Or  componentUpdated  Hook 
  el.__library__.setOptions(Object.assign(binding.oldValue, binding.value))
 },
 unbind: function (el) {
  //  Release instances 
  el.__library__.destory()
 }
})