【Vue3】withDefaults和defineProps设置默认值

直接在`defineProps`中设置默认值

优点：

对于简单的组件，在defineProps对象中直接设置默认值是一种简洁的方式。所有props的定义，包括类型和默认值，都集中在一个地方，一目了然。可以很方便地看到每个props的类型和默认值信息。例如：

php 复制代码

<script setup>
const props = defineProps({
    count: {type: Number,default: 0},
    name: {type: String,default: 'Guest'}
});
</script>

当props是一个复杂的对象类型，并且默认值是一个对象时，直接在defineProps中设置默认值可以更好地利用对象的解构特性。例如：

js 复制代码

<script setup>
const props = defineProps({
    user: {type: Object,default: () => ({name: 'Guest',age: 18})}
});
</script>

这里可以直接返回一个函数来生成默认的对象值，在组件初始化时会根据这个函数生成默认的user对象。

缺点：当props的定义比较复杂，或者需要对默认值进行一些复杂的计算或处理时，会使defineProps中的代码变得臃肿。例如，如果默认值需要调用一个函数来生成，会让props的定义看起来不够清晰。而且如果多个组件有相似的props默认值设置逻辑，这种方式不利于代码的复用。

使用`withDefaults`设置默认值

优点：

withDefaults将默认值的设置与props的类型定义分离开来，使得代码结构更加清晰。特别是当props的类型定义比较复杂，或者有多个props需要设置默认值时，这种分离可以提高代码的可读性。例如：

html 复制代码

<script setup>
import { withDefaults } from 'vue';
const props = defineProps({count: Number,name: String});
withDefaults(props, {count: 0,name: 'Guest'});
</script>

先专注于props的类型定义，然后在另一个地方（withDefaults调用处）清晰地设置默认值。如果需要在多个组件中复用默认值设置逻辑，可以将withDefaults的调用封装成一个函数。
withDefaults在处理复杂对象类型的默认值时，与直接在defineProps中设置默认值的功能类似，但语法上略有不同。

js 复制代码

 <script setup>
 import { withDefaults } from 'vue';
 const props = defineProps({user: Object});
 withDefaults(props, {user: () => ({name: 'Guest',age: 18})});
 </script>

同样是通过一个函数来生成默认的对象值，但需要注意的是，withDefaults在处理默认值时，对于引用类型（如对象、数组）的数据，如果默认值是一个引用类型的字面量（如{}或[]），这个引用在所有组件实例中是共享的。这可能会导致一些意外的行为，例如一个组件修改了默认值对象的属性，可能会影响到其他组件的默认值。所以在使用withDefaults设置引用类型的默认值时，通常建议像上面那样返回一个新的对象或数组。

缺点：

代码的位置相对分散，需要查看两个地方（defineProps和withDefaults）才能完整地了解props的定义和默认值情况。对于简单的props设置，可能会觉得有些繁琐。

withDefaults的使用场景

提高代码可读性和组织性

（1）复杂组件的 **props**默认值设置

当组件具有多个props，并且每个props都需要设置默认值时，使用withDefaults可以让代码结构更清晰。

这样，props的类型定义和默认值设置分开，便于开发者阅读和理解。先看到props的类型定义，能快速了解组件接受哪些类型的属性，然后通过withDefaults看到默认值的设置，使得代码逻辑更加清晰，尤其在大型项目或者复杂组件开发中，有助于提高代码的可维护性。

（2）遵循组件开发规范和团队协作要求 在团队开发中，可能会有代码风格和组件开发规范的要求。使用withDefaults可以更好地符合这些规范。例如，规定props的类型定义和默认值设置分开，这样在代码审查或者新成员加入团队时，能够更容易理解组件的props逻辑。而且，这种规范的代码结构有助于提高代码的复用性，方便在其他组件中复用props的定义和默认值设置逻辑。

便于默认值的动态生成和复用

（1）动态生成默认值

有时候props的默认值需要根据一些外部条件或者组件内部状态来动态生成。使用withDefaults可以方便地实现这一点。例如，一个国际化组件，其默认文本需要根据当前语言环境来生成：

js 复制代码

<script setup>
import { withDefaults, ref } from 'vue';
import i18n from './i18n';
const props = defineProps({
    buttonText: String
});
const currentLanguage = ref(i18n.getCurrentLanguage());
function generateDefaultButtonText() {
    return i18n.getTextForLanguage(currentLanguage.value, 'defaultButtonText');
}
withDefaults(props, {
    buttonText: generateDefaultButtonText
});
</script>

这里通过一个函数generateDefaultButtonText来动态生成buttonText的默认值，该函数可以根据当前语言环境获取合适的默认文本。这种方式使得默认值的生成更加灵活，能够适应不同的应用场景。

（2）默认值逻辑复用

如果多个组件需要相同或相似的默认值设置逻辑，可以将withDefaults的调用封装成一个函数。例如，有多个数据展示组件都需要对data属性设置默认值为空数组，对loading属性设置默认值为false：

js 复制代码

function setCommonDefaults(props) {
    withDefaults(props, {
        data: () => [],
        loading: false
    });
}

然后在各个组件中使用这个函数：

js 复制代码

<script setup>
import { defineProps, withDefaults } from 'vue';
import { setCommonDefaults } from './commonDefaults';
const props = defineProps({
    data: Array,
    loading: Boolean
});
setCommonDefaults(props);
</script>

这样可以提高代码的复用性，减少重复代码，同时也便于统一修改默认值设置逻辑。

【Vue3】withDefaults和defineProps设置默认值

直接在defineProps中设置默认值

使用withDefaults设置默认值

withDefaults的使用场景

提高代码可读性和组织性

便于默认值的动态生成和复用

直接在`defineProps`中设置默认值

使用`withDefaults`设置默认值