Vue 教程 自定义指令 + 生命周期全解析
Vue 3 自定义指令 完整生命周期详解2025–2026 实用版Vue 3 的自定义指令和组件生命周期是中高级开发中非常高频的内容尤其在以下场景中几乎必考/必用复杂表单自动聚焦、输入防抖、权限显隐拖拽、长按、水印、懒加载图片第三方库集成图表 resize、虚拟滚动优化调试/埋点/权限控制指令下面把自定义指令和组件生命周期放在一起讲解因为它们在实际项目中经常结合使用。一、Vue 3 组件生命周期Composition API 版为主Vue 3 Composition API 使用onXXX钩子函数Options API 则使用beforeCreate等选项。阶段Options APIComposition API执行时机最常用场景是否异步beforeCreatebeforeCreate—不推荐实例初始化之前几乎不用同步createdcreated—不推荐数据响应式处理完成可访问 data / props同步beforeMountbeforeMountonBeforeMount模板编译完成即将挂载到 DOM 前同步mountedmountedonMounted组件挂载完成DOM 已渲染可操作真实 DOM同步beforeUpdatebeforeUpdateonBeforeUpdate数据变化 → 重新渲染前可获取旧 DOM 状态同步updatedupdatedonUpdatedDOM 更新完成注意不要在这里修改响应式数据同步beforeUnmountbeforeUnmountonBeforeUnmount组件即将卸载清理定时器、事件监听、订阅等同步unmountedunmountedonUnmounted组件完全卸载DOM 已移除同步activatedactivatedonActivatedkeep-alive 组件被激活时同步deactivateddeactivatedonDeactivatedkeep-alive 组件失活时同步errorCapturederrorCapturedonErrorCaptured捕获子组件错误可返回 false 阻止抛出同步renderTracked—onRenderTracked响应式依赖被追踪调试用—renderTriggered—onRenderTriggered响应式依赖被触发重新渲染调试用—serverPrefetch—onServerPrefetchSSR 预取数据Nuxt / Vite SSR 常用—最常用的 5 个钩子日常开发占比 90%onMounted→ 获取 DOM、发起首次请求、初始化第三方库onBeforeUnmount/onUnmounted→ 清理定时器、事件监听、WebSocket 断开onUpdated→ DOM 更新后做一些微调慎用避免死循环onActivated/onDeactivated→ keep-alive 场景列表缓存、音频播放暂停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-xxxVue 3 自定义指令的钩子函数比 Vue 2 精简了很多统一成了6 个生命周期钩子名称Options API 写法Composition API 写法directive执行时机是否传入 elcreatedcreatedcreated指令绑定到元素时在 beforeMount 之前是beforeMountbeforeMountbeforeMount元素挂载前是mountedmountedmounted元素挂载完成后最常用是beforeUpdatebeforeUpdatebeforeUpdate包含组件的 VNode 更新前是updatedupdatedupdated包含组件的 VNode 更新后是beforeUnmountbeforeUnmountbeforeUnmount元素卸载前是unmountedunmountedunmounted元素卸载后最常用于清理是最常用的是mountedunmounted三、自定义指令完整写法对比三种方式方式1全局注册main.js / main.ts// main.jsimport{createApp}fromvueimportAppfrom./App.vueconstappcreateApp(App)// 简单示例v-focus 自动聚焦app.directive(focus,{mounted(el){el.focus()}})// 带清理的示例v-longpress 长按 500ms 触发app.directive(longpress,{mounted(el,binding){lettimernullconststart(e){if(e.typeclicke.button!0)returntimersetTimeout((){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-permissionuser:edit编辑/button /template方式3最推荐 —— 使用 composable 创建可复用指令// composables/useFocus.jsimport{onMounted,onBeforeUnmount}fromvueexportfunctionuseFocus(){constfocusDirective{mounted(el){el.focus()}}return{focusDirective}}script setup import { useFocus } from /composables/useFocus const { focusDirective } useFocus() /script template input v-focus / /template四、经典自定义指令合集面试 项目必备指令名称功能常用钩子典型实现要点v-focus自动聚焦mountedel.focus()v-copy一键复制内容mounteddocument.execCommandv-lazy-img图片懒加载mounted IntersectionObserverv-longpress长按触发mounted 定时器清理v-permission按钮级权限控制mounted判断权限 → remove 或 display:nonev-debounce输入防抖beforeUpdate updatedv-resize监听元素尺寸变化mountedResizeObserverv-watermark页面/元素水印mountedcanvas 或 div 叠加v-draggable拖拽移动mounted mousemovev-loading自定义 loading 遮罩mounted / updated五、总结面试/项目常问的 10 个问题Vue 3 自定义指令比 Vue 2 少了哪些钩子为什么自定义指令的el、binding、vnode、prevNode分别是什么为什么推荐在beforeUnmount或unmounted做清理如何让自定义指令支持修饰符.prevent .stop 等v-model在自定义组件和自定义指令中的区别组件的onBeforeUnmount和指令的beforeUnmount执行顺序如何调试自定义指令Vue Devtools 是否支持自定义指令如何获取组件实例getCurrentInstance为什么很多 UI 库如 Element Plus大量使用自定义指令你写过哪些自定义指令解决了什么痛点有具体想实现的自定义指令比如 v-permission、v-lazy、v-draggable需要完整代码示例吗或者想看某个生命周期钩子在真实业务中的典型用法可以直接告诉我
)
)
