自定义指令
除了VUE 内置指令外,VUE也支持我们自定义注册指令,分为局部和全局注册 但这些想必大家都不陌生,其中官方API也是写的明明白白 官方API点这里
而且自定义指令也会极大程度上帮助我们日常的编程,但这是很有意思的事情出现了,就是钩子函数。
先上官方解释
1.bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2.inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
3.update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
4.componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5.unbind:只调用一次,指令与元素解绑时调用。
App.vue
main.js
加载
这时候我们可以判断首先加载时会经历这两个钩子函数,分别对应第一次绑定,和父元素加载完毕
按下更新按钮
这时候我们可以判断节点内容更新时会经历这两个钩子函数,分别对应更新前,和更新后
按下关闭
阶段销毁时经历unbind钩子函数
按下加载
再次看下加载
这时我们应该可以弄明白钩子函数
但其实大多数情况 我们只希望节点在加载和更新时发生同样的事情,而忽略其它钩子函数,可以这么写