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 默认绑定 valueinput 事件,单个组件只能绑定一个 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 更强大,允许直接访问 vnodeprevVnode,更适合响应式更新。

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.lazyv-model.numberv-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-showTransition 组件中的支持更为直观,直接支持过渡效果:

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

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

相关推荐
Achieve前端实验室2 分钟前
【每日一面】手写防抖函数
前端·面试·node.js
三十_7 分钟前
TypeORM 多对多关联篇:中间表、JoinTable 与复杂关系的建模
前端·后端
_pengliang8 分钟前
React Native 使用 react-native-credentials-manager 接入谷歌登录教程
javascript·react native·react.js
用户6883362059708 分钟前
移动端 Web 性能调优:viewport、dvh 与触控优化解析
前端
console.log('npc')13 分钟前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐16 分钟前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
前端付豪20 分钟前
项目启动:搭建Vue 3工程化项目
前端·javascript·vue.js
Asort21 分钟前
JavaScript设计模式(二十)——状态模式 (State):复杂状态管理的优雅解决方案
前端·javascript·设计模式
小琴爱减肥31 分钟前
Vue3 组合式 API 实战
vue.js
im_AMBER38 分钟前
React 07
前端·笔记·学习·react.js·前端框架