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 的指令做适配,可以根据业务需求具体分析。需要更多的代码实例,也可以告诉我!

相关推荐
吴鹰飞侠3 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman9 分钟前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼13 分钟前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
落一落,掉一掉16 分钟前
第十二周 waf绕过和前端加密绕过
前端
Asort17 分钟前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee25 分钟前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安26 分钟前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼28 分钟前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
LRH28 分钟前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js
用户34216749055230 分钟前
Java高手速成--吃透源码+手写组件+定制开发教程
前端·深度学习