Vue内置指令与自定义指令

一、前言

在 Vue 开发中，指令（Directives） 是一种非常强大的特性，它允许我们以声明式的方式操作 DOM。Vue 提供了一些常用的内置指令，如 v-if、v-show、v-bind、v-on 等，同时也支持开发者根据需求创建自己的自定义指令。

本文将带你全面了解 Vue 中的指令系统，包括：

常用内置指令的使用
自定义指令的定义与注册
指令的生命周期钩子函数
实际应用场景与案例分析

二、Vue 内置指令介绍

1. 条件渲染指令

v-if：根据表达式的真假决定是否渲染元素。
v-else / v-else-if：配合 v-if 使用，实现多条件判断。
v-show：通过 CSS 的 display 属性控制元素显示/隐藏。

<h1 v-if="isLoggedIn">欢迎回来！</h1>
<h1 v-else>请先登录。</h1>

2. 列表渲染指令

v-for：用于循环渲染列表数据。

<ul><li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

3. 数据绑定指令

v-bind：动态绑定属性值，常用缩写为 :attr="value"。

<img :src="imageUrl" alt="图片">
<a :href="linkUrl">点击我</a>

v-model：实现表单控件与组件状态的双向绑定。

<input type="text" v-model="username">
<p>你输入的用户名是：{{ username }}</p>

4. 事件绑定指令

v-on：监听 DOM 事件并执行对应的方法，常用缩写为 @event="handler"。

<button @click="submitForm">提交</button>
<input @keyup.enter="search" placeholder="按回车搜索">

5. 其他常用指令

v-text：更新元素的文本内容，会覆盖已有内容。
v-html：插入 HTML 字符串（注意 XSS 风险）。
v-pre：跳过编译过程，直接显示原始内容。
v-once：只渲染一次，后续不再更新。

三、自定义指令的使用

虽然 Vue 提供了很多实用的内置指令，但有时我们需要一些特定功能来操作 DOM 或增强组件行为，这时就可以使用自定义指令。

1. 定义一个自定义指令

Vue 2.x 示例：

// main.js
Vue.directive('highlight', {bind(el, binding, vnode) {el.style.backgroundColor = binding.value;}
});

Vue 3 Composition API 示例：

// main.js
const app = createApp(App)app.directive('highlight', {beforeMount(el, binding) {el.style.backgroundColor = binding.value;}
})app.mount('#app')

2. 在模板中使用

<p v-highlight="'yellow'">这段文字会被高亮显示</p>

3. 指令的参数说明

每个指令都有一个回调对象，包含以下属性：

属性名	描述
`el`	当前绑定的 DOM 元素
`binding`	包含指令的所有信息的对象，如 `value`, `oldValue`, `arg`, `modifiers` 等
`vnode`	虚拟节点
`prevNode`	之前的虚拟节点（Vue 3）

四、指令的生命周期钩子函数（Vue 3）

在 Vue 3 中，自定义指令有如下可用的钩子函数：

钩子函数	触发时机
`beforeMount`	指令第一次绑定到元素时调用（之前叫 `bind`）
`mounted`	元素被插入到父节点时调用（之前叫 `inserted`）
`beforeUpdate`	所在组件即将更新时调用（之前叫 `update`）
`updated`	所在组件更新后调用（之前叫 `componentUpdated`）
`beforeUnmount`	元素即将解绑时调用（之前叫 `unbind`）
`unmounted`	元素已解绑时调用

五、实战应用：创建几个实用的自定义指令

✅ 指令一：自动聚焦指令 `v-focus`

适用于页面加载或弹窗打开时自动聚焦某个输入框。

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

使用：

<input v-focus placeholder="自动获取焦点">

✅ 指令二：权限控制指令 `v-permission`

可用于根据用户角色控制某些按钮或菜单的显示。

app.directive('permission', {mounted(el, binding) {const userRoles = ['admin', 'editor'];if (!userRoles.includes(binding.value)) {el.parentNode.removeChild(el); // 移除无权限的元素}}
})

使用：

<button v-permission="'admin'">管理员操作</button>

✅ 指令三：节流防抖指令 `v-throttle` / `v-debounce`

防止高频触发事件（如滚动、输入等），提升性能。

app.directive('throttle', {mounted(el, binding) {let timer = null;el.addEventListener('scroll', () => {if (!timer) {binding.value(); // 执行传入的方法timer = setTimeout(() => timer = null, 300);}});}
});

使用：

<div v-throttle="onScroll">滚动区域</div>

六、最佳实践与注意事项

场景	推荐做法
不要滥用指令	优先使用组件化、响应式数据处理逻辑
尽量避免直接操作 DOM	Vue 的核心思想是数据驱动视图
指令应保持轻量	复杂逻辑建议封装成方法或组件
注意内存泄漏	在 unmounted 钩子中清理定时器、事件监听等资源
Vue 3 中替代过滤器	可结合指令 + 方法进行格式化输出