【Vue3】withDefaults和defineProps

在Vue 3中，withDefaults和defineProps是用于定义和设置组件的props的工具，特别是在使用script setup语法糖时。

defineProps

defineProps函数用于在Vue组件中声明props的类型。它通常与TypeScript一起使用，以提供类型安全。在script setup语法中，defineProps用于定义接收自父组件的数据的属性。

withDefaults

withDefaults函数在Vue 3中用于为defineProps定义的props提供默认值。它的参数结构如下：

1	withDefaults(defineProps<Type>(), defaultProps)

第一个参数是defineProps调用的结果，defineProps()用于定义组件的props，并且可以指定一个TypeScript接口或类型来静态类型检查这些props。
第二个参数是一个对象，其中的键是prop的名字，值是这个prop的默认值。默认值可以是直接的值，或者是返回值的函数，这样每次使用默认值时都会调用该函数来获取一个新的值。

例如

withDefaults函数用于为defineProps定义的props提供默认值。这是处理props可能未被父组件传递时的情况的一种方式，确保组件有一个可靠的默认状态。

import { defineProps, withDefaults } from "vue";

interface Props {
  postList: any[];
}

const props = withDefaults(defineProps<Props>(),{
  postList: () => [],
});

defineProps()：这里使用Props接口来定义props的结构，Props接口指定了postList是一个数组。
withDefaults(…, { postList: () => [] })：这里为postList提供了一个默认值。默认值是通过一个函数() => []来指定的，这意味着如果没有提供postList，它将默认为一个空数组。使用函数来返回默认值是一种常见的做法，因为这确保了每次使用默认值时都会创建一个新的数组实例，避免了不同实例间共享同一个数组的问题。

postList: () => []的意思

这里postList: () => []表示postList的默认值是一个空数组。使用箭头函数()返回一个新的空数组[]，这样做的好处是每次调用这个默认值时都会创建一个新的数组实例，避免了潜在的引用类型数据共享问题，这是在JavaScript中处理数组和对象默认值的推荐做法。

总结来说，这种写法确保了组件的postList prop在没有从父组件接收到值时，会安全地使用一个新的空数组作为默认值，同时保持了类型安全和响应性。