vue3 toRefs解构props中的数据并重命名

在Vue 3中，可以使用`toRefs`函数解构`props`中的数据并进行重命名。

假设有一个组件，该组件接收一个名为`myProp`的`prop`。你可以使用`toRefs`将其解构并重命名为`renamedProp`，如下所示：

import { toRefs } from 'vue';

export default {
  props: {
    myProp: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const { renamedProp } = toRefs(props);

    // 在这里可以使用重命名后的 renamedProp 变量
    // ...

    return {
      renamedProp,
    };
  },
};

现在你可以在组件的`setup`函数中使用`renamedProp`变量，它将引用原始的`myProp`数据，并且可以在模板或其他逻辑中使用它。

注意，在Vue 3中，所有的`props`都是只读的，如果你想修改传递给组件的数据，你需要先通过`toRefs`将其转换成响应式的引用，然后再进行修改。