Vue 教程 自定义指令 + 生命周期全解析

Vue 3 自定义指令 + 完整生命周期详解（2025–2026 实用版）

Vue 3 的自定义指令和组件生命周期是中高级开发中非常高频的内容，尤其在以下场景中几乎必考/必用：

• 复杂表单（自动聚焦、输入防抖、权限显隐）
• 拖拽、长按、水印、懒加载图片
• 第三方库集成（图表 resize、虚拟滚动优化）
• 调试/埋点/权限控制指令

下面把自定义指令和组件生命周期放在一起讲解，因为它们在实际项目中经常结合使用。

一、Vue 3 组件生命周期（Composition API 版为主）

Vue 3 Composition API 使用onXXX钩子函数，Options API 则使用beforeCreate等选项。

最常用的 5 个钩子（日常开发占比 90%+）：

1. onMounted→ 获取 DOM、发起首次请求、初始化第三方库
2. onBeforeUnmount/onUnmounted→ 清理定时器、事件监听、WebSocket 断开
3. onUpdated→ DOM 更新后做一些微调（慎用，避免死循环）
4. onActivated/onDeactivated→ keep-alive 场景（列表缓存、音频播放暂停）
5. onErrorCaptured→ 组件级错误边界

代码示例（组合式 API 完整写法）

<script setup> import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue' const count = ref(0) let timer = null onMounted(() => { console.log('组件已挂载，可以操作 DOM') timer = setInterval(() => count.value++, 1000) }) onBeforeUnmount(() => { console.log('组件即将卸载，清理资源') clearInterval(timer) }) onActivated(() => { console.log('keep-alive 组件被激活') // 可重新启动轮询、视频播放等 }) onDeactivated(() => { console.log('keep-alive 组件失活') // 暂停轮询、视频等 }) </script>

二、Vue 3 自定义指令（v-xxx）

Vue 3 自定义指令的钩子函数比 Vue 2 精简了很多，统一成了6 个生命周期：

最常用的是：mounted+unmounted

三、自定义指令完整写法对比（三种方式）

方式1：全局注册（main.js / main.ts）

// main.jsimport{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)// 简单示例：v-focus 自动聚焦app.directive('focus',{mounted(el){el.focus()}})// 带清理的示例：v-longpress 长按 500ms 触发app.directive('longpress',{mounted(el,binding){lettimer=nullconststart=(e)=>{if(e.type==='click'&&e.button!==0)returntimer=setTimeout(()=>{binding.value(e)// 执行绑定的函数},500)}constcancel=()=>clearTimeout(timer)el.addEventListener('mousedown',start)el.addEventListener('touchstart',start)el.addEventListener('click',cancel)el.addEventListener('mouseout',cancel)el.addEventListener('touchend',cancel)el.addEventListener('touchcancel',cancel)// 推荐：把清理函数存到 el 上el._longpressCleanup=()=>{el.removeEventListener('mousedown',start)// ... 移除所有监听clearTimeout(timer)}},beforeUnmount(el){// 组件卸载时自动清理if(el._longpressCleanup){el._longpressCleanup()}}})app.mount('#app')

方式2：局部注册（<script setup>中使用）

<script setup> import { directive } from 'vue' const vPermission = { mounted(el, binding) { if (!hasPermission(binding.value)) { el.parentNode?.removeChild(el) } } } // 使用方式 defineOptions({ directives: { permission: vPermission } }) </script> <template> <button v-permission="'user:edit'">编辑</button> </template>

方式3：最推荐 —— 使用 composable 创建可复用指令

// composables/useFocus.jsimport{onMounted,onBeforeUnmount}from'vue'exportfunctionuseFocus(){constfocusDirective={mounted(el){el.focus()}}return{focusDirective}}

<script setup> import { useFocus } from '@/composables/useFocus' const { focusDirective } = useFocus() </script> <template> <input v-focus /> </template>

四、经典自定义指令合集（面试 + 项目必备）

五、总结：面试/项目常问的 10 个问题

1. Vue 3 自定义指令比 Vue 2 少了哪些钩子？为什么？
2. 自定义指令的el、binding、vnode、prevNode分别是什么？
3. 为什么推荐在beforeUnmount或unmounted做清理？
4. 如何让自定义指令支持修饰符（.prevent .stop 等）？
5. v-model在自定义组件和自定义指令中的区别？
6. 组件的onBeforeUnmount和指令的beforeUnmount执行顺序？
7. 如何调试自定义指令（Vue Devtools 是否支持）？
8. 自定义指令如何获取组件实例（getCurrentInstance）？
9. 为什么很多 UI 库（如 Element Plus）大量使用自定义指令？
10. 你写过哪些自定义指令？解决了什么痛点？

有具体想实现的自定义指令（比如 v-permission、v-lazy、v-draggable）需要完整代码示例吗？
或者想看某个生命周期钩子在真实业务中的典型用法？可以直接告诉我～