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