vue3项目开发细节记录

props定义类型的默认值default

defineProps({
    // 数组
    treeOptions: {
        type: Array as PropType<IBusinessDomainCodes[]>,
        default: () => [],
    },
    // 对象
    currentPermissionsMap: {
        type: Object as PropType<IPermissionMap>,
        default: () => ({}),
    },
})

• 返回数组：直接使用 []，例如 default: () => []。
• 返回对象：使用括号 () 将对象字面量包裹起来，避免语法冲突， 例如 default: () => ({})。

props定义类型type

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 会确保属性被传递。