Vue2 vs Vue3 的 props 对比

🌟 Vue2 vs Vue3 的 props 对比 🌟

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

---

1. Vue2 的 props

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

示例：

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 类型推断。

示例：

<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 的泛型定义：

<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 函数。

示例：

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