网站积分的作用百度识图查图片

Vue 2 和 Vue 3 的指令系统非常相似，但 Vue 3 在指令方面进行了优化和扩展。以下是 Vue 2 和 Vue 3 中指令的对比：

---

1. 通用指令

这些指令在 Vue 2 和 Vue 3 中都可以使用，功能一致：

指令	说明
v-bind	绑定 HTML 属性或组件 props
v-model	双向数据绑定
v-if	条件渲染
v-else	v-if 的后续条件
v-else-if	v-if 的其他条件
v-for	列表渲染
v-on	绑定事件监听器
v-show	根据条件切换元素的显示/隐藏（通过 display 样式）
v-text	更新元素的文本内容
v-html	更新元素的 HTML 内容
v-cloak	防止闪烁，直到编译结束
v-pre	跳过编译，直接渲染原始内容
v-once	只渲染一次，不再更新

---

2. Vue 3 新增的指令功能

(1) v-model 支持多绑定

Vue 2 的 v-model 默认绑定 value 和 input 事件，单个组件只能绑定一个 v-model。

Vue 3 支持 多绑定，可以自定义绑定的属性名称。例如：

<!-- Vue 3 支持多绑定 -->
<MyComponent v-model:title="title" v-model:content="content" />

在组件中声明绑定：

props: ['title', 'content'],
emits: ['update:title', 'update:content'],

---

(2) 自定义指令的更新函数增强

Vue 3 自定义指令中的钩子函数比 Vue 2 更强大，允许直接访问 vnode 和 prevVnode，更适合响应式更新。

Vue 2 自定义指令示例：

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

Vue 3 自定义指令示例：

const app = Vue.createApp({});
app.directive('focus', {mounted(el) {el.focus(); // 元素插入时触发},updated(el) {el.focus(); // 数据更新时触发},
});

---

(3) 移除的指令

• v-model 修饰符变化：

  • Vue 2 使用 v-model.lazy、v-model.number、v-model.trim。
  • Vue 3 改用参数：

    <!-- Vue 3 -->
    <input v-model.lazy="message" />
    <input v-model.number="age" />
    <input v-model.trim="name" />
    

• v-on 修饰符合并：

  • Vue 2 的 .native 修饰符被移除。
  • Vue 3 通过 emits 传递事件，无需 .native。

---

(4) Transition 组件中的指令

Vue 3 对 v-show 在 Transition 组件中的支持更为直观，直接支持过渡效果：

<template><transition name="fade"><div v-show="visible">Hello Vue 3</div></transition>
</template>

---

如果你需要针对 Vue 2 和 Vue 3 的指令做适配，可以根据业务需求具体分析。需要更多的代码实例，也可以告诉我！