VUE自定义指令钩子函数讲解

自定义指令

除了VUE 内置指令外，VUE也支持我们自定义注册指令，分为局部和全局注册 但这些想必大家都不陌生，其中官方API也是写的明明白白 官方API点这里

而且自定义指令也会极大程度上帮助我们日常的编程，但这是很有意思的事情出现了，就是钩子函数。

先上官方解释

1.bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2.inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

3.update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

4.componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5.unbind：只调用一次，指令与元素解绑时调用。

App.vue

main.js

加载

这时候我们可以判断首先加载时会经历这两个钩子函数，分别对应第一次绑定，和父元素加载完毕

按下更新按钮

这时候我们可以判断节点内容更新时会经历这两个钩子函数，分别对应更新前，和更新后

按下关闭

阶段销毁时经历unbind钩子函数

按下加载

再次看下加载

这时我们应该可以弄明白钩子函数

但其实大多数情况 我们只希望节点在加载和更新时发生同样的事情，而忽略其它钩子函数,可以这么写