vue自定义指令的钩子函数,vue3的钩子函数
本文主要介绍如何理解Vue2.x和Vue3.x的自定义命令的用法以及hook函数的原理。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
Vue2.x用法全局注册局部注册使用钩子函数的钩子函数参数Vue3.x用法全局注册局部注册使用钩子函数与Vue2.x相比，钩子函数有所变化。
Vue2.x用法
全局注册
Vue.directive(指令名称，{自定义指令生命周期})
局部注册
指令：{指令名称，{自定义指令生命周期}}
使用
垂直指令名：属性名。修饰符="值值"
钩子函数
绑定到DOM后调用Bind-custom指令。它只被调用一次，注意：它只是被添加到DOM中，但是渲染并没有完成。
inserted——自定义指令所在的DOM，在插入到父DOM后调用，渲染已经完成(最重要)
更新-元素被更新，但是子元素没有被更新。这个钩子将被调用(自定义指令所在的组件被更新，但不保证更新)——与自定义所在的组件相关。
updated-组件和子组件被更新和执行(定制指令所在的组件被更新，子组件也被更新)。
—与定制所在的组件相关。
Unbind-Unbind(销毁)。(自定义指令在DOM销毁时执行)。它只被调用一次。
钩子函数的参数
注意：这不能在自定义命令中直接使用。
1.el:当前指令所在的dom元素。
2.binding:它是一个对象，表示当前指令上的属性、修饰符和值等信息。只有值是最重要的，也是最常用的。
参数：字符串，属性名。例如，在v-my-directive:foo中，属性名是“foo”。
修改器：对象，包含所有修改器的对象。例如：在v-my-directive.foo.bar中，修饰符对象是{foo: true，bar: true}。
Name:字符串，指令名，不包括v前缀。
RawName，String，完整的指令名，例如在v-my-directive: foo.bar="11 "中，完整的指令名是v-my-directive: foo.bar="11 "
Value:Any，指令绑定的当前值，例如在v-my-directive="1 1 "中，绑定值为2。(最重要的)
Expression:String，解析哪个值或表达式。例如，在v-my-directive="1 1 "中，表达式为" 1 1 "。
OldValue:Any，指令绑定的前一个值，仅在update和componentUpdated挂钩中可用。无论值是否改变都可用。
OldArg:Any，指令属性名的前一个值，它只在update和componentUpdated挂钩中可用。无论值是否改变都可用。
3.vnode:可以获取当前节点信息，以及当前指令所在组件的实例vnode.context当前指令所在的实例对象。
4.oldVnode:前一个虚拟节点，仅在update和componentUpdated挂钩中可用。
Vue3.x用法
与Vue2.x的用法相同
全局注册
Vue.directive(指令名称，{自定义指令生命周期})
局部注册
指令：{指令名称，{自定义指令生命周期}}
使用
垂直指令名：属性名。修饰符="值值"
以插件的形式，全局注册。
钩子函数
较 Vue2.x 相比， 钩子函数有变化
最终的API如下所示：
const MyDirective={
Created (el，binding，vnode，prevvnode) {}，//new
beforeMount() {}，
已安装(){}，
Before () {}，//new
已更新(){}，
BeforeUnmount() {}，//new
卸载(){}
}
created-自定义指令创建后所在的组件。
before mount——是Vue2.x中的绑定，在自定义指令绑定到DOM后调用。它只被调用一次，注意：它只是被添加到DOM中，但是渲染并没有完成。
mounted-是在Vue2.x中插入的，vue 2 . x是自定义指令所在的DOM。它在插入到父DOM后被调用，渲染已经完成(最重要的)
自定义指令所在的Update-DOM，在更新前调用。
updated——即Vue2.x中的componentUpdated
卸载前-销毁前
未安装-销毁后
以上是了解Vue2.x和Vue3.x自定义指令的用法以及hook函数原理的详细内容。更多关于Vue2.x和Vue3.x的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。