---
url: /docs/guide/usage/linter/rules/vue/define-props-destructuring.md
---

### 它的作用

此规则强制对 Vue 3 Composition API 的 props 处理采用一致的风格，
允许你在要求解构或禁止解构之间进行选择。

### 为什么这不好？

默认情况下，该规则要求在 `defineProps` 赋值给变量时使用解构语法，并会警告不要将 `withDefaults` 与解构一起使用。

### 示例

以下是此规则下**错误**代码的示例：

```vue
<script setup lang="ts">
const props = defineProps(["foo"]);
const propsWithDefaults = withDefaults(defineProps(["foo"]), { foo: "default" });
const { baz } = withDefaults(defineProps(["baz"]), { baz: "default" });
const props = defineProps<{ foo?: string }>();
const propsWithDefaults = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
</script>
```

以下是此规则下**正确**代码的示例：

```vue
<script setup lang="ts">
const { foo } = defineProps(["foo"]);
const { bar = "default" } = defineProps(["bar"]);
const { foo } = defineProps<{ foo?: string }>();
const { bar = "default" } = defineProps<{ bar?: string }>();
</script>
```

## 配置

此规则接受一个包含以下属性的配置对象：

### destructure

type: `"only-when-assigned" | "always" | "never"`

default: `"only-when-assigned"`

要求或禁止解构。

#### `"only-when-assigned"`

当 `defineProps` 被赋值给变量时要求解构，并警告不要将 `withDefaults` 与解构一起使用

#### `"always"`

在使用 `defineProps` 时要求解构，并警告不要将 `withDefaults` 与解构一起使用

#### `"never"`

要求使用变量存储 props，并禁止解构

## 如何使用

## 版本

此规则在 v1.20.0 中新增。

## 参考资料