Vue 2 与 Vue 3 指令大全（含版本差异）

Vue 2 与 Vue 3 指令大全（含版本差异）

一、通用指令（Vue 2 & Vue 3 均支持）

指令	用途	示例
v-text	更新元素的 textContent	<span v-text="message"></span>
v-html	更新元素的 innerHTML（注意 XSS 风险）	<div v-html="rawHtml"></div>
v-show	根据条件切换元素的 display CSS 属性	<div v-show="isVisible">内容</div>
v-if	条件渲染，控制元素是否存在于 DOM 中	<div v-if="isLoggedIn">用户面板</div>
v-else	与 v-if 或 v-show 配合使用，表示“否则”分支	<div v-if="error">错误</div><div v-else>正常</div>
v-else-if	多条件分支渲染	<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div>
v-for	列表渲染，支持数组和对象迭代	<li v-for="(item, index) in items">{{ item.text }}</li>
v-on	监听 DOM 事件（缩写 @）	<button @click="handleClick">点击</button>
v-bind	动态绑定属性（缩写 :）	<img :src="imageUrl" :alt="imageAlt">
v-model	表单双向绑定，支持输入框、复选框、选择器等	<input v-model="searchQuery">
v-slot	插槽内容分发（缩写 #，Vue 3 推荐）	<template #header><h1>标题</h1></template>
v-pre	跳过编译，直接输出原始内容	<span v-pre>{{ 不会被编译 }}</span>
v-cloak	防止编译前的闪烁（配合 CSS [v-cloak] { display: none; }）	<div v-cloak>{{ message }}</div>
v-once	仅渲染一次，后续数据变化不更新	<div v-once>{{ 静态内容 }}</div>

二、Vue 3 专属指令

指令	用途	示例
v-memo	记忆化渲染，缓存模板片段（需配合 v-for 使用）	<div v-for="item in list" v-memo="[item.id]">{{ item.text }}</div>
v-is	动态组件渲染（替代 Vue 2 的 is 特性）	<component v-is="currentComponent"></component>
v-bind 合并	支持对象语法合并多个属性（Vue 3 新增）	<div :class="{ active: isActive }" :style="{ color: textColor }"></div>

三、Vue 2 与 Vue 3 指令差异

指令/特性	Vue 2 行为	Vue 3 行为	变化说明
v-model	默认绑定 value 属性，触发 input 事件	默认绑定 modelValue 属性，触发 update:modelValue 事件	支持自定义修饰符和组件 v-model 参数
v-bind 合并	不支持对象语法合并属性	支持对象语法合并属性	简化多属性绑定逻辑
v-slot	缩写为 #，但需配合 <template> 使用	完全替代 slot 特性，推荐使用缩写 #	统一插槽语法，提升可读性
v-on 修饰符	部分修饰符行为不同（如 .stop、.prevent）	统一修饰符行为，新增 .exact 修饰符	提升事件处理的一致性

四、指令进阶用法

1. v-model 修饰符

• Vue 2：

  <input v-model.trim="message"> <!-- 自动去除首尾空格 -->
  <input v-model.number="age">    <!-- 转换为数字类型 -->
  

• Vue 3：

  <input v-model:value.trim="message"> <!-- 显式指定属性名 -->
  <input v-model:modelValue.number="age">
  

2. v-for 与 v-if 优先级

• Vue 2：v-for 优先级高于 v-if，可能导致性能问题。
• Vue 3：v-if 优先级高于 v-for，推荐在父元素使用 v-if。

3. v-slot 作用域插槽

• Vue 2：

  <template slot="header" slot-scope="{ user }">
    {{ user.name }}
  </template>
  

• Vue 3：

  <template #header="{ user }">
    {{ user.name }}
  </template>
  

五、自定义指令

1. 全局注册

// Vue 2
Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
});

// Vue 3
const app = createApp({});
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

2. 局部注册

// Vue 2
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
};

// Vue 3
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};

3. 指令生命周期钩子

• Vue 2：bind, inserted, update, componentUpdated, unbind
• Vue 3：created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted

六、总结

特性	Vue 2	Vue 3	关键差异
指令系统	基础指令集	增强指令集（如 v-memo）	提升性能和灵活性
v-model	固定属性绑定	支持自定义参数和修饰符	组件通信更灵活
插槽语法	slot 特性	v-slot 缩写 #	统一语法，提升可读性
自定义指令	5 个生命周期钩子	7 个生命周期钩子	更精细的控制

通过掌握这些指令，您可以更高效地开发 Vue 应用。Vue 3 在指令系统上进行了多项优化，特别是 v-model 的灵活性和 v-memo 的性能提升，值得重点关注。