![Vue.js从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/987/44509987/b_44509987.jpg)
上QQ阅读APP看书,第一时间看更新
3.2.2 钩子函数
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P54_5724.jpg?sign=1738869613-lw89r8DJHOEIBpkoSbx99dotO6h2rUCG-0-998e7c985158d39cef4229a4135a5911)
在指令注册中涉及一些重要的钩子函数,它们在编写程序中起到了重要作用。下面将对指令中的钩子函数进行逐一介绍。
(1)bind:只调用一次,第一次绑定指令到元素时调用,可以在此绑定中只执行一次初始化操作。
(2)inserted:被绑定元素插入父节点时调用。父节点只要存在即可被调用,不必存在于document中。也就是说,必定存在父节点,但是它的父节点未必存在文档中。
(3)update:无论绑定值是否发生变化,只要被绑定元素所在的模板被更新即可调用。Vue.js会通过比较更新前后的绑定值,忽略不必要的模板更新操作。也就是说,在包含该组件的VNode更新后调用该函数,可能在其子节点更新前调用,指令的值可能已更改、可能未更改。最好通过判断新旧值来过滤掉不必要的操作。
(4)componentUpdated:被绑定元素所在模板完成一次更新周期时调用。也就是说,在包含该组件的VNode及其子节点的VNode已更新后进行调用。
(5)unbind:指令与元素解绑时调用,只调用一次。
下面用代码对钩子函数进行说明。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P54_52989.jpg?sign=1738869613-yWFNL08J0ailwUzDdvjJj1Q3dkfn0JL6-0-09eeb98979560f92e4a21d3328991624)