vue2和vue3指令
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" />
- Vue 2 使用
-
v-on修饰符合并：- Vue 2 的
.native修饰符被移除。 - Vue 3 通过
emits传递事件，无需.native。
- Vue 2 的
(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 的指令做适配，可以根据业务需求具体分析。需要更多的代码实例，也可以告诉我！