vue3 app.directive 中的mounted用法

在 Vue3 中，app.directive 可以用于全局注册自定义指令。在注册时，可以传入一个对象，该对象包含了钩子函数和指令的配置信息。

其中，mounted 钩子函数是在指令绑定到元素上后执行的函数。它接收四个参数：

- el：指令绑定的元素
- binding：一个对象，包含了指令的相关信息，如指令名称、绑定的值、修饰符等
- vnode：Vue 编译生成的虚拟节点
- prevVnode：上一个虚拟节点

在 mounted 钩子函数中，可以对元素进行一些初始化操作，或者绑定事件监听器等。

例如，以下是一个简单的自定义指令，它在元素上绑定了一个点击事件监听器，并在点击时弹出一个提示框：

app.directive('my-directive', {
  mounted(el, binding, vnode, prevVnode) {
    el.addEventListener('click', () => {
      alert('You clicked me!')
    })
  }
})

在模板中使用该指令，如下所示：

<template>
  <div v-my-directive>Click me</div>
</template>