摘要：指令说明v-bind绑定 HTML 属性或组件 propsv-model双向数据绑定v-if条件渲染v-elsev-if 的后续条件v-else-ifv-if 的其他条件v-for列表渲染v-on绑定事件监听器v-show根据条件切换元素的显示/隐藏（通过 d
Vue 2 和 Vue 3 的指令系统非常相似，但 Vue 3 在指令方面进行了优化和扩展。以下是 Vue 2 和 Vue 3 中指令的对比：
这些指令在 Vue 2 和 Vue 3 中都可以使用，功能一致：
指令说明v-bind绑定 HTML 属性或组件 propsv-model双向数据绑定v-if条件渲染v-elsev-if 的后续条件v-else-ifv-if 的其他条件v-for列表渲染v-on绑定事件监听器v-show根据条件切换元素的显示/隐藏（通过 display 样式）v-text更新元素的文本内容v-HTML更新元素的 HTML 内容v-cloak防止闪烁，直到编译结束v-pre跳过编译，直接渲染原始内容v-once只渲染一次，不再更新Vue 2 的 v-model 默认绑定 value 和 input 事件，单个组件只能绑定一个 v-model。
Vue 3 支持 多绑定，可以自定义绑定的属性名称。例如：
在组件中声明绑定：
props: ['title', 'content'],emits: ['update:title', 'update:content'],Vue 3 自定义指令中的钩子函数比 Vue 2 更强大，允许直接访问 vnode 和 prevVnode，更适合响应式更新。
Vue.directive('focus', {inserted(el) {el.focus;},});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 改用参数： v-on 修饰符合并：Vue 2 的 .native 修饰符被移除。Vue 3 通过 emits 传递事件，无需 .native。Vue 3 对 v-show 在 Transition 组件中的支持更为直观，直接支持过渡效果：
Hello Vue 3如果你需要针对 Vue 2 和 Vue 3 的指令做适配，可以根据业务需求具体分析。需要更多的代码实例，也可以告诉我！
来源：小顾科技观察
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!