在 Vue 框架中，自定义指令时可以实现哪些生命周期钩子函数？请列举并说明每个钩子函数的触发时机与典型用途。

回答思路

1. 【回答框架 1】Vue 自定义指令用于对普通 DOM 元素进行底层操作，通过 directives 选项注册。在 Vue 2 中，指令定义对象可包含 bind、inserted、update、componentUpdated、unbind 五个钩子函数，分别对应指令首次绑定到元素、元素插入父节点、元素更新、组件和子组件更新后、指令与元素解绑时触发。
2. 【回答框架 2】Vue 3 中钩子函数名称有所调整：created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。它们分别对应元素创建后、挂载前、挂载后、更新前、更新后、卸载前、卸载后。其中 created 在元素创建后立即调用，但此时还不能访问 DOM 属性，因为尚未插入 DOM。
3. 【回答框架 3】bind/beforeMount 适合做一次性初始化，比如添加事件监听器、设置初始样式；inserted/mounted 适合需要父节点存在才能执行的操作，如根据父元素尺寸设置样式；update/updated 用于响应式数据变化时更新指令行为，注意避免不必要的重复操作；unbind/unmounted 用于清理工作，如移除事件监听、销毁定时器，防止内存泄漏。
4. 【回答框架 4】自定义指令钩子函数接收参数包括 el（绑定的元素）、binding（指令信息对象，如 value、arg、modifiers）、vnode（Vue 编译生成的虚拟节点）和 prevVnode（更新时的旧虚拟节点）。开发中常用 el 和 binding，其中 binding.value 传递指令的绑定值。
5. 【关键点 1】Vue 2 钩子：bind、inserted、update、componentUpdated、unbind。
6. 【关键点 2】Vue 3 钩子：created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。
7. 【关键点 3】bind/mounted 适合初始化，unbind/unmounted 适合清理。
8. 【关键点 4】钩子函数通过 el、binding、vnode 等参数获取上下文。
9. 【易错点 1】容易混淆 Vue 实例生命周期钩子与自定义指令钩子，需注意触发时机不同。
10. 【易错点 2】在 updated 钩子中可能因频繁触发导致性能问题，需要合理判断是否更新。
11. 【易错点 3】在卸载钩子中未清理事件监听器或定时器可能导致内存泄漏。