props 传递过程中支持解构 refs

[guaijie]

在当前版本中, 不支持直接解构 restProps

<script setup lang="ts">
  const props = defineProps<Props>()
  const { prop1,  prop2, ...restProps } = toRefs(props)
</script>
<template>
  <Comp  :prop1="prop1" :prop2="prop2" prop3="restProps.prop3" prop4="restProps.prop4"  />
</template>

支持组件直接解构 refs, 无需当心因解构 props 而失去响应式，且无需任何多余的 api , 且向下兼容

在 sfc 中

<script setup lang="ts">
  const props = defineProps<Props>()
  const { prop1,  prop2, ...restProps } = toRefs(props)
</script>
<template>
  <Comp  :prop1="prop1" :prop2="prop2" v-bind="restProps "  />
</template>

同样在 tsx 中

defineComponent((props) => {

  const { prop1, prop2, ...restProps} = toRefs(props)
  
  return () => <Comp prop1={prop1} prop2={prop2} {...restProps} />
})

[s3xysteak]

It can do that. Refer to playground.

[guaijie]

这是对 3.5 中引入的解构 props 而保持响应式的回应。使用 toRefs 并进行解构更符合直觉，且可以处理任意 Reactive 类型的数据（比如：attrs）。而 3.5 的新特性只能对 defineProps 有效，且不利于代码的可读性和可维护性（它既不是 Ref类型，也不是 Reactive 类型，脱离了现有的响应式的数据结构，只是在编译后会加上 'props.'，这无疑会增加维护成本）。

针对你在演练场中的代码，我个人并不推崇，如果是单纯自己看、自己用，那么如何去写都无所谓。但一个团队，更注重代码的可维护性和可读性

[s3xysteak]

return () => <Comp prop1={prop1} prop2={prop2} {...restProps} />

Do not use ref in render functions. Use the value instead:

() => <Comp prop1={prop1.value} />

[guaijie]

vue 可以针对 jsx 作自己的编译处理，当然也可以使用 vite 插件：比如 Vue Macros。我这里的举例只是一种方案或者说建议，并不是说针对现在的项目