快捷導(dǎo)航

Vue3自定義指令完全指南(附詳細(xì)代碼)

更新時(shí)間：2025年04月27日 09:00:23 作者：john_Asura

這篇文章主要介紹了Vue3自定義指令的相關(guān)資料,Vue3自定義指令優(yōu)化了生命周期鉤子,提供了更靈活的DOM操作方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

基本概念

在Vue3中，自定義指令是用于直接操作DOM的重要工具。相比Vue2，Vue3的指令系統(tǒng)進(jìn)行了優(yōu)化和簡(jiǎn)化。

生命周期鉤子

鉤子名稱	對(duì)應(yīng)Vue2名稱	觸發(fā)時(shí)機(jī)
created	bind	元素屬性綁定前
beforeMount	inserted	元素插入父節(jié)點(diǎn)前
mounted	-	元素插入父節(jié)點(diǎn)后
beforeUpdate	update	組件更新前
updated	componentUpdated	組件及子組件更新后
beforeUnmount	unbind	元素卸載前
unmounted	-	元素卸載后

指令注冊(cè)方式

全局注冊(cè)

// main.js
const app = createApp(App)

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

局部注冊(cè)

export default {
  directives: {
    highlight: {
      mounted(el, binding) {
        el.style.backgroundColor = binding.value || 'yellow'
      }
    }
  }
}

常用應(yīng)用場(chǎng)景

1. 自動(dòng)聚焦

// 使用
<input v-focus>

// 實(shí)現(xiàn)
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

2. 權(quán)限控制

// 使用
<button v-permission="['admin']">刪除</button>

// 實(shí)現(xiàn)
app.directive('permission', {
  mounted(el, binding) {
    const roles = ['user', 'editor', 'admin']
    if (!binding.value.includes(roles.current)) {
      el.parentNode.removeChild(el)
    }
  }
})

3. 防抖指令

// 使用
<button v-debounce:click="submitForm">提交</button>

// 實(shí)現(xiàn)
app.directive('debounce', {
  mounted(el, binding) {
    let timer = null
    el.addEventListener(binding.arg, () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        binding.value()
      }, 500)
    })
  }
})

進(jìn)階技巧

動(dòng)態(tài)參數(shù)傳遞

// 使用
<div v-pin:[direction]="200"></div>

// 實(shí)現(xiàn)
app.directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed'
    const direction = binding.arg || 'top'
    el.style[direction] = binding.value + 'px'
  }
})

Composition API 結(jié)合

import { useScroll } from './scrollComposable'

app.directive('scroll', {
  mounted(el, binding) {
    const { start, stop } = useScroll(binding.value)
    el._scrollHandler = { start, stop }
    start()
  },
  unmounted(el) {
    el._scrollHandler.stop()
  }
})

注意事項(xiàng)

避免過度使用：優(yōu)先使用組件化方案
參數(shù)驗(yàn)證：使用binding.value前進(jìn)行類型檢查
性能優(yōu)化：及時(shí)在unmounted階段清理副作用
命名規(guī)范：使用小寫字母+連字符格式（如v-custom-directive）
瀏覽器兼容：謹(jǐn)慎使用新API，必要時(shí)添加polyfill

總結(jié)

場(chǎng)景	推薦指令類型	示例
DOM操作	自定義指令	v-tooltip
全局功能	全局指令	v-permission
復(fù)雜交互	組合式指令	v-draggable
簡(jiǎn)單樣式修改	類綁定	:class=“…”