vue3 什么是属性解构

在 Vue3 中，属性解构是一种从组件属性中提取特定属性的方法。它允许你在组件中声明一个对象，该对象包含组件属性中的特定属性，然后在组件中使用该对象来访问这些属性。这种方式可以方便地访问多个属性，减少了代码冗余和重复。例如，假设你有一个组件，其中有两个属性：`name` 和 `age`，你可以使用属性解构来访问这些属性：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  },
  setup(props) {
    const { name, age } = props; // 使用属性解构
    // ...
  }
}
</script>

在上面的示例中，我们使用了属性解构来从 `props` 对象中提取 `name` 和 `age` 属性，然后在组件中直接使用这些属性。这样可以使代码更加简洁易懂。