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 的支持非常友好!快来试试吧!🚀

相关推荐
Sheldon一蓑烟雨任平生1 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
꒰ঌ 安卓开发໒꒱2 小时前
RabbitMQ面试全解析:从核心概念到高可用架构
面试·架构·rabbitmq
paopaokaka_luck3 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
杨筱毅3 小时前
【C++】【常见面试题】最简版带大小和超时限制的LRU缓存实现
c++·面试
Sheldon一蓑烟雨任平生4 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
Dream it possible!6 小时前
LeetCode 面试经典 150_链表_旋转链表(64_61_C++_中等)
c++·leetcode·链表·面试
阿健君7 小时前
Android 高频八股文十问
面试
zuo-yiran8 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837758 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
T___T8 小时前
AIGC 实战:用 pnpm 提速 + Node.js 调用 OpenAI 🤖
面试·node.js