vue3 withDirectives实现自定义指令

Vue3 中提供了一个新的 API withDirectives，用于动态添加自定义指令。使用 withDirectives API 可以在组件中动态添加自定义指令，并在指令中访问组件实例的属性和方法。

以下是一个简单的例子：

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

<script>
import { withDirectives, h } from 'vue'

export default {
  directives: {
    'my-directive': {
      mounted(el, binding, vnode) {
        console.log('directive mounted')
        console.log('component instance:', vnode.component)
      }
    }
  },

  mounted() {
    const newVnode = withDirectives(h('div'), [
      [vMyDirective, {}]
    ])
    console.log('new vnode:', newVnode)
  }
}
</script>

在这个例子中，我们定义了一个自定义指令 my-directive，并在组件的模板中使用了它。在组件的 mounted 钩子中，我们使用 withDirectives API 动态创建了一个带有指令的 vnode，并输出了创建的新 vnode 和组件实例。

需要注意的是，在使用 withDirectives API 时，需要将指令的定义对象作为数组的第二项传递给 API，并且指令的名称需要以 v- 开头。另外，通过 withDirectives 创建的 vnode 不会替换组件中的原始 vnode，需要手动将其插入到 DOM 中。

总之，使用 withDirectives API 可以方便地实现自定义指令的动态添加和组件实例属性和方法的访问。