vue3项目开发细节记录

props定义类型的默认值default

ts 复制代码
defineProps({
    // 数组
    treeOptions: {
        type: Array as PropType<IBusinessDomainCodes[]>,
        default: () => [],
    },
    // 对象
    currentPermissionsMap: {
        type: Object as PropType<IPermissionMap>,
        default: () => ({}),
    },
})
  • 返回数组 :直接使用 [],例如 default: () => []
  • 返回对象 :使用括号 () 将对象字面量包裹起来,避免语法冲突, 例如 default: () => ({})

props定义类型type

dart 复制代码
defineProps({
    // 不推荐
    options1: {
        type: Array as () => IBusinessDomainCodes[],
        default: () => [],
    },
    // 推荐
    options2: {
        type: Array as PropType<IBusinessDomainCodes[]>,
        default: () => [],
    }
})
  • options1使用了类型断言方式 Array as () => IBusinessDomainCodes[],虽然可以工作,但不如 PropType 明确。
  • options2:使用了 PropType<IBusinessDomainCodes[]>,这是 Vue 3 官方推荐的方式,更明确和易读。

浅拷贝和深拷贝

  • 浅拷贝 :使用对象展开运算符 { ... } 创建一个新对象,并将 props.currentAuthDataSelectedDataMap 的所有可枚举属性复制到这个新对象中。
  • 特点
    • 只复制对象的第一层属性。
    • 如果对象的属性是引用类型(如对象或数组),则复制的是引用,而不是实际的值。
    • 更快,适用于简单对象或不需要深层次复制的场景。
  • 深拷贝 :使用 Lodash 的 _.cloneDeep 方法创建一个新对象,并递归复制 props.currentAuthDataSelectedDataMap 的所有属性,包括嵌套的对象和数组。
  • 特点
    • 递归复制对象的所有层级属性。
    • 如果对象的属性是引用类型,复制的是实际的值,而不是引用。
    • 更慢,适用于复杂对象或需要深层次复制的场景。

props定义类型必填

  • 必填属性 :当你设置某个属性为必填(required: true)时,Vue 会确保在使用该组件时必须传递这个属性。
  • 不需要默认值 :对于必填属性,不需要再设置默认值(default),因为 Vue 会确保属性被传递。
相关推荐
北辰alk2 分钟前
Next.js 为何抛弃 Vite?自造轮子 Turbopack 的深度技术解析
前端
Cache技术分享25 分钟前
203. Java 异常 - Throwable 类及其子类
前端·后端
wingring27 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码
前端
LFly_ice28 分钟前
学习React-20-useId
前端·学习·react.js
要加油哦~31 分钟前
刷题 | 牛客 - 前端面试手撕题 - 中等 - 1-2/20 知识点&解答
前端·面试
Async Cipher40 分钟前
JSON-LD 的格式
前端·javascript
LFly_ice1 小时前
学习React-18-useCallBack
前端·学习·react.js
双普拉斯1 小时前
Spring WebFlux调用生成式AI提供的stream流式接口,实现返回实时对话
java·vue.js·人工智能·后端·spring
How_doyou_do2 小时前
样式冲突修复组件
前端·javascript·html
IT_陈寒2 小时前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端