The life cycle of custom instructions in Vue3 has undergone some changes, which can be roughly divided into two categories: changes in hook function names and changes in hook function parameters.
Hook function name changes
Custom directives in Vue2 have five life cycle hook functions: bind, inserted, update, componentUpdated, unbind. In Vue3, the names of these hook functions have changed:
- bind --> beforeMount
- inserted --> mounted
- update -->beforeUpdate
- componentUpdated – updated
- unbind -->unmounted
- changes in hook function parameters
In Vue2, the lifecycle hook function of a custom instruction has two parameters: el and binding. In Vue3, the parameters of the lifecycle hook function have changed a little:
- beforeMount and mounted: only one parameter VNode
- beforeUpdate and updated: only two parameters, VNode and prevNode
- unmounted: only one parameter VNode
Wherein, vnode represents a virtual node, and prevVnode represents a virtual node before updating. In the two hook functions beforeUpdate and updated, you can judge whether the attribute bound by the instruction is updated by comparing vnode and prevVnode.
In general, the changes in the life cycle of custom instructions in Vue3 are mainly to better fit with the combined API of Vue3 and improve the readability and maintainability of the code.