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

相关推荐
gnip7 分钟前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫1 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript