Vue3系列 - 自定义指令的实现

Vue3中的自定义指令允许开发者直接操作DOM元素，为框架增加了更多的灵活性。

自定义指令的核心实现：

指令钩子函数：指令定义了一系列的钩子函数，对应元素的不同生命周期。
- bind：指令第一次绑定到元素时调用
- inserted：被绑定元素插入父节点时调用
- update：所在组件的VNode更新时调用
- componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
- unbind：指令与元素解绑时调用
指令注册：可以全局注册或组件内注册。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 元素首次绑定指令时的逻辑
  },
  update(el, binding, vnode, oldVnode) {
    // 元素更新时的逻辑
  }
})

指令参数：每个钩子函数接收以下参数：
- el：指令所绑定的元素
- binding：包含指令的各种属性的对象
- vnode：Vue编译生成的虚拟节点
- oldVnode：上一个虚拟节点（仅在update和componentUpdated钩子中可用）
动态参数：Vue3支持动态指令参数，可以根据组件实例数据动态改变。

<div v-my-directive:[dynamicArg]="value"></div>

自定义指令为处理DOM操作提供了强大的工具，特别适合于需要直接操作DOM的场景，如管理焦点、滚动行为、或集成第三方库。