Vue指令体系概览

Vue.js指令作为模板语法核心，通过特殊属性实现DOM与数据的动态绑定。本文系统梳理Vue 2.x/3.x兼容指令，按功能分类解析其工作原理与实用场景。

一、基础数据绑定指令

1. v-text与v-html

v-text实现纯文本插值，自动转义HTML标签：

<div v-text="message"></div>
<!-- 等价于 -->
<div>{{ message }}</div>

v-html则解析HTML字符串，需注意XSS风险：

<div v-html="rawHtml"></div>

最佳实践：仅在可信内容源使用v-html，配合DOMPurify等库进行净化。

2. v-once指令

实现静态内容一次性渲染，提升性能：

<span v-once>{{ neverChange }}</span>

适用于版本号、版权信息等不变内容。

二、条件渲染指令

1. v-if/v-else-if/v-else

基于布尔值控制元素渲染：

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

性能优化：频繁切换场景使用v-show（通过display控制）替代。

2. v-show

通过CSS显示/隐藏元素：

<button v-show="isAdmin">管理入口</button>

适用于选项卡、折叠面板等高频切换场景。

三、列表渲染指令

1. v-for基础用法

遍历数组/对象：

<li v-for="(item, index) in items" :key="item.id">
  {{ index }}. {{ item.name }}
</li>
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

关键原则：必须绑定:key，优先使用唯一ID而非数组索引。

2. 数组更新检测

Vue对以下方法进行包装实现响应式：

• push()/pop()/shift()/unshift()
• splice()/sort()/reverse()

直接通过索引修改数组需使用Vue.set或数组splice方法。

四、事件处理指令

1. v-on基础语法

监听DOM事件：

<button v-on:click="handleClick">点击</button>
<!-- 简写形式 -->
<button @click="handleClick">点击</button>

2. 事件修饰符

提供便捷的事件处理：

<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>
<!-- 事件冒泡阻止 -->
<div @click.stop="doThis"></div>
<!-- 按键修饰符 -->
<input @keyup.enter="submit" />

完整修饰符列表：

• .stop - 阻止冒泡
• .prevent - 阻止默认
• .capture - 捕获模式
• .self - 仅当event.target是当前元素
• .once - 单次触发
• .passive - 提升滚动性能（特别用于touch事件）

五、双向数据绑定

v-model本质

实现表单输入和应用状态的双向绑定：

<input v-model="message" placeholder="编辑我">
<!-- 等价于 -->
<input 
  :value="message" 
  @input="message = $event.target.value"
>

不同表单元素适配

• 文本输入：<input type="text">
• 多行文本：<textarea>
• 复选框：<input type="checkbox">（单个布尔值或数组）
• 单选按钮：<input type="radio">
• 选择框：<select>

修饰符应用：

<!-- 懒加载（change而非input时更新） -->
<input v-model.lazy="msg">
<!-- 数字类型转换 -->
<input v-model.number="age" type="number">
<!-- 去除首尾空格 -->
<input v-model.trim="msg">

六、属性绑定指令

1. v-bind基础用法

动态绑定HTML属性：

<img :src="imagePath" :alt="imageAlt">
<!-- 简写形式 -->
<div :id="dynamicId"></div>

2. class与style绑定

对象语法：

<div :class="{ active: isActive }"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

数组语法：

<div :class="[activeClass, errorClass]"></div>

七、高级指令应用

1. v-pre指令

跳过编译，显示原始Mustache标签：

<div v-pre>{{ 这部分不会被编译 }}</div>

适用于展示包含Vue语法的文档场景。

2. v-cloak指令

解决模板渲染时的闪烁问题：

[v-cloak] { display: none; }

<div v-cloak>{{ message }}</div>

需配合CSS使用，直到编译完成才显示内容。

3. v-slot指令（Vue 2.6+）

作用域插槽的现代语法：

<template v-slot:header="slotProps">
  {{ slotProps.user }}
</template>
<!-- 简写形式 -->
<template #header="{ user }">
  {{ user }}
</template>

八、自定义指令开发

1. 指令注册方式

全局注册：

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

局部注册：

directives: {
  color: {
    bind(el, binding) {
      el.style.color = binding.value
    }
  }
}

2. 指令生命周期

• bind：首次绑定到元素时调用
• inserted：被绑定元素插入父节点时调用
• update：所在组件更新时调用
• componentUpdated：组件及子组件更新后调用
• unbind：解绑时调用

3. 实用指令示例

自动聚焦指令：

Vue.directive('auto-focus', {
  inserted(el) {
    el.focus()
  }
})

权限控制指令：

Vue.directive('permission', {
  inserted(el, binding) {
    const hasPermission = checkPermission(binding.value)
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

九、指令使用最佳实践

1. 优先级管理：v-if与v-for同用时，v-for优先级更高，建议避免这种用法
2. 性能优化：频繁操作的DOM使用自定义指令封装
3. 可维护性：复杂逻辑拆分为组合式API或自定义指令
4. 兼容性处理：使用@vue/compat构建配置进行Vue 2到3的迁移

十、Vue 3指令新特性

1. 碎片(Fragments)：允许组件有多个根节点
2. Teleport：<teleport>组件实现内容渲染到指定DOM
3. 自定义渲染器：通过createRendererAPI自定义渲染目标

示例：Teleport使用

<button @click="showModal = true">显示弹窗</button>
<teleport to="body">
  <div v-if="showModal" class="modal">...</div>
</teleport>

通过系统掌握这些Vue指令，开发者能够更高效地实现复杂的前端交互逻辑。建议结合Vue Devtools进行指令行为的实时调试，逐步构建出高性能、可维护的Vue应用。