Vue2 vs Vue3 的 props 对比

🌟 Vue2 vs Vue3 的 props 对比 🌟

在 Vue2 和 Vue3 中,props 的使用方式有一些变化,尤其是在 TypeScript 支持和语法上。以下是详细的对比和 withDefaults 的用法说明!


1. Vue2 的 props

在 Vue2 中,props 是通过 props 选项定义的,支持数组或对象形式。

示例:

javascript 复制代码
export default {
  props: {
    // 基础类型检测
    title: String,
    // 多个可能的类型
    likes: [String, Number],
    // 必填项
    isPublished: {
      type: Boolean,
      required: true
    },
    // 默认值
    commentIds: {
      type: Array,
      default: () => [1, 2, 3]
    }
  }
};

特点:

  • 不支持 TypeScript 类型推断。
  • 默认值和类型验证需要通过对象形式定义。

2. Vue3 的 props

在 Vue3 中,props 可以通过 defineProps 函数定义,支持 TypeScript 类型推断。

示例:

xml 复制代码
<script setup lang="ts">
const props = defineProps({
  title: String,
  likes: [String, Number],
  isPublished: {
    type: Boolean,
    required: true
  },
  commentIds: {
    type: Array,
    default: () => [1, 2, 3]
  }
});
</script>

使用 TypeScript 的泛型定义:

ini 复制代码
<script setup lang="ts">
interface Props {
  title: string;
  likes?: string | number;
  isPublished: boolean;
  commentIds?: number[];
}

const props = defineProps<Props>();
</script>

特点:

  • 支持 TypeScript 类型推断。
  • 语法更简洁,适合组合式 API。

3. withDefaults的用法

在 Vue3 中,使用 TypeScript 的泛型定义 props 时,如果需要设置默认值,可以使用 withDefaults 函数。

示例:

ini 复制代码
<script setup lang="ts">
interface Props {
  title: string;
  likes?: string | number;
  isPublished: boolean;
  commentIds?: number[];
}

const props = withDefaults(defineProps<Props>(), {
  title: "Default Title",
  likes: 0,
  isPublished: false,
  commentIds: () => [1, 2, 3]
});
</script>

说明:

  • withDefaults 的第一个参数是 defineProps 的返回值。
  • 第二个参数是一个对象,用于设置默认值。

📊 Vue2 和 Vue3 的 props 对比表

特性 Vue2 Vue3
定义方式 props选项 defineProps函数
TypeScript 支持 不支持 支持
默认值设置 通过 default属性 通过 withDefaults函数
类型验证 通过 type属性 通过 TypeScript 类型或 type属性
语法简洁性 较繁琐 更简洁

🌈 总结

  • Vue2 :使用 props 选项定义,不支持 TypeScript 类型推断。
  • Vue3 :使用 defineProps 定义,支持 TypeScript 类型推断,语法更简洁。
  • withDefaults:用于在 TypeScript 中为 props 设置默认值。

Vue3 的 props 设计更加现代化,尤其是对 TypeScript 的支持非常友好!快来试试吧!🚀

相关推荐
国家不保护废物3 分钟前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
二十雨辰1 小时前
eduAi-智能体创意平台
前端·vue.js
m0dw2 小时前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物2 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
小光学长3 小时前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据4 小时前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
paopaokaka_luck5 小时前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
怪兽20145 小时前
请例举 Android 中常用布局类型,并简述其用法以及排版效率
android·面试
余道各努力,千里自同风5 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui