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 会确保属性被传递。
相关推荐
gnip2 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel2 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休3 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪3 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do3 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选3 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选3 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼3 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——3 小时前
前端登录鉴权详解
前端·javascript
李姆斯3 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理