面试题：Vue 自定义指令的生命周期钩子函数有哪些？

在 Vue 中，自定义指令的生命周期钩子函数包括以下几个：

1. bind：
   • 只调用一次，指令第一次绑定到元素时触发。
   • 适合进行一次性初始化设置。
2. inserted：
   • 当绑定元素插入父节点时触发（仅保证父节点存在，但不一定已插入文档）。
   • 适合需要访问 DOM 的操作。
3. update：
   • 所在组件的 VNode 更新时调用，但可能在其子 VNode 更新之前。
   • 适合在组件更新时执行操作。
4. componentUpdated：
   • 所在组件的 VNode 及其子 VNode 全部更新后调用。
   • 适合在组件及其子组件更新后执行操作。
5. unbind：
   • 只调用一次，指令与元素解绑时触发。
   • 适合进行清理工作。

示例代码

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 初始化操作
  },
  inserted(el, binding, vnode) {
    // 元素插入父节点时执行
  },
  update(el, binding, vnode, oldVnode) {
    // 组件更新时执行
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 组件及其子组件更新后执行
  },
  unbind(el, binding, vnode) {
    // 解绑时执行
  }
});

参数说明

• el：指令绑定的元素，可以直接操作 DOM。
• binding：包含指令相关信息，如 name、value、oldValue、expression、arg、modifiers 等。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

使用场景

• bind：设置初始样式或事件监听器。
• inserted：操作 DOM，如聚焦输入框。
• update：根据绑定值的变化更新 DOM。
• componentUpdated：在组件及其子组件更新后执行操作。
• unbind：移除事件监听器或清理资源。

这些钩子函数为自定义指令提供了灵活的生命周期管理，适用于各种 DOM 操作和状态管理需求。