714765…

vue3自定义指令

自定义指令（个人理解就是创建指令直接操作DOM，对DOM的操作封装成了指令）
在vue中重用代码的方式：组件和组合式函数。
组件：主要是构建模块（注重封装完整的功能）
组合式函数：侧重于有状态的逻辑。
另一方面，自定义指定主要是为了重用设计普通元素的底层DOM访问的（注重DOM的操作）逻辑。
一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子，当一个元素被Vue插入到DOM忠厚，它会被自动聚焦：

将一个自定义指令全局注册到应用层级也是一种常见的做法：

注意:只有当所需功能只能通过直接的DOM操作来实现时，才应该使用自定义指令。其他情况下应该尽可能地使用v-bind这样的内置指令来声明式的使用模板，这样更高效，也对服务器端渲染更友好。

指令钩子

一个指令的定义对象可以提供几个钩子函数（都是可选的）

钩子参数

指令的钩子会传递以下几种参数：

el:指令绑定的元素。这可以用于直接操作DOM
binding：一个对象，包含以下属性 1.value：传递给指令的值，例如在v-my-directive=“1+1”中，值是2.表达式的结果 2.oldValue：之前的值，仅在beforeUpdate和update中可用，无论值是否更改，它都可用。 3.arg:传递给指令的参数（如果有的话）。例如在v-my-directive：foo中，参数是“foo” 4.modifiers:一个包含修饰符的对象（如果有的话）。例如在v-my-directive.foo.bar中，修饰对象是{foo:true,bar:true} 5.instance:使用该指令的组件实例。 6.dir：指令的定义对象
vnode:代表绑定元素的底层VNode
prevNode：之前的渲染中代表指令所绑定元素的VNode，仅在beforeUpdate和updated钩子中使用。
举例来说，像下面这样使用指令：

binding参数会是这样一个对象：