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.

[s3xysteak]

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

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

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