以如下代码为例
const avatar = computed(() => props.user.avatar ?? fallbackAvatar)
该运算符的工作原理是,如果左侧的表达式props.user.avatar
的值为null
或undefined
,那么它会返回右侧的fallbackAvatar
。然而,如果props.user.avatar
的值是一个空字符串’‘,空值合并运算符不会认为它为“缺失”,因为空字符串是一个有效的值,它不是null
或undefined
。
因此,当props.user.avatar
为’'时,??
运算符不会触发右侧fallbackAvatar
的返回。如果你想在props.user.avatar
为空字符串时也使用fallbackAvatar
,你应该使用逻辑或运算符(||)
来替代空值合并运算符,因为||会返回第一个非 false 值:
const avatar = computed(() => props.user.avatar || fallbackAvatar)