Vue3 directives 属性（建议收藏）

Vue3 directives 属性核心概念

Vue3 directives 属性是一组用于直接操作 DOM 元素的特殊标记（如 v-if、v-model），它们将响应式数据与视图层绑定。相比 Vue2 的指令系统，Vue3 的 directives 属性在编译时被优化为更高效的渲染函数，且支持自定义指令扩展功能。

基础语法

内置指令

// 双向数据绑定（v-model）  
<input v-model="username" placeholder="输入用户名" /> // 数据变化时同步更新 input 值  

// 条件渲染（v-if）  
<p v-if="isLoggedIn">欢迎回来，{{ username }}</p> // 根据 isLoggedIn 显示/隐藏内容  

// 列表渲染（v-for）  
<ul>  
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>  
</ul> // 遍历 items 数组生成列表项

自定义指令定义

// 定义自定义指令（如限制输入数字）  
app.directive('number-only', {  
  beforeMount(el, binding) {  
    el.addEventListener('input', () => {  
      // 过滤非数字字符  
      el.value = el.value.replace(/[^0-9]/g, '')  
    })  
  }  
})  
// 使用方式：  
<input v-number-only placeholder="仅允许数字" />

进阶特性

特性	描述	示例代码片段
参数传递	通过 `binding.arg` 获取参数	`v-focus="3000"` 在 3 秒后聚焦元素
修饰符处理	用 `binding.modifiers` 判断修饰符	`v-color.bg` 同时设置背景色和文本颜色
动态绑定	使用 `:` 前缀绑定表达式	`<span v-text="greeting + ' ' + name"></span>`
生命周期钩子	从 beforeMount 到 unmounted 全流程控制	在 unmounted 阶段移除事件监听器

实战应用

表单验证指令

// 创建自定义指令实现手机号格式校验  
app.directive('phone-validate', {  
  mounted(el, binding) {  
    el.addEventListener('blur', () => {  
      const phoneReg = /^1[3-9]\d{9}$/  
      if (!phoneReg.test(el.value)) {  
        el.style.borderColor = 'red'  
        binding.instance[binding.arg] = false // 更新验证状态  
      }  
    })  
  }  
})  
// 组件中使用：  
<input v-phone-validate:validPhone placeholder="请输入手机号" />  
<p v-if="!validPhone">手机号格式不正确</p>

动态样式绑定指令

// 自定义指令根据条件切换样式类  
app.directive('dynamic-class', {  
  updated(el, binding) {  
    if (binding.value) {  
      el.classList.add('highlight') // 添加高亮样式  
    } else {  
      el.classList.remove('highlight') // 移除高亮样式  
    }  
  }  
})  
// 组件中使用：  
<div v-dynamic-class="isError">需要错误提示的区域</div>

注意事项

避免过度封装：简单 DOM 操作建议用原生 JavaScript，复杂逻辑才用 directives 属性
修饰符冲突处理：自定义指令与内置修饰符（如 .trim）组合时需明确优先级
内存泄漏风险：在 unmounted 钩子中务必移除事件监听器和定时器
命名规范：自定义指令建议采用 kebab-case 命名，如 v-number-only 而非 vNumberOnly