组件支持直接传递 ref 类型数据

[guaijie]

在模板语法中，组件并不能直接传递 Ref 类型数据，需要通过编译器对 Ref 类型数据进行解包。事实上，我们可以在组件中通过判断其是否具有某一私有变量（例如 symbol）来区分 Ref 与 { value: any } 类型。

这样可以使得组件间数据交互变得更加简单，且向下兼容，不会出现破坏性的更改

<script setup>
// 破坏性的更改：解析出来的 props 类型为：Reactive<{ prop1: Ref<string>; prop2: Ref<number>; prop3:  Ref<boolean> }>
const { prop1, ...restProps } = useProps<{ prop1: string; prop2: number, prop3: boolean }>() 
const { attr1, ...restAttrs } = useAttrs<{ attr1: string; attr2: number, attr3: boolean }>()
// 如果不想进行破坏性更改，需要借助 toRefs 手动转换
// const { prop1, ...restProps } = toRefs(props)
// const { attr1, ...restAttrs } = toRefs(attrs)

// 普通数据
const data = { value: 'data' }  

</script>

<template>
  <!-- 这里并不需要借助现有的编译逻辑方式对 props1 解包，而是组件能直接接收 Ref 数据并在组件内部处理 -->
  <Comp :prop1="prop1" :attr1="attr1" :data="data.value" v-bind="{ ...restProps, ...restAttrs }" />
  <!-- 也可以写成 -->
  <Comp :prop1="prop1.value" :attr1="attr1.value" :data="data.value" v-bind="{ ...restProps, ...restAttrs }" />
</template>

同样的，在 tsx 中

// 破坏性的更改：解析出来的 props 类型为：Reactive<{ prop1: Ref<string>; prop2: Ref<number>; prop3:  Ref<boolean> }>
const { prop1, prop2, ...restProps } = useProps<{ prop1: string; prop2: number, prop3: boolean }>() 
const { attr1, ...restAttrs } = useAttrs<{ attr1: string; attr2: number, attr3: boolean }>()
// 如果不想进行破坏性更改，需要借助 toRefs 手动转换
// const { prop1, prop2, ...prop3 } = toRefs(props)
// const { attr1, ...restAttrs } = toRefs(attrs)

// 普通数据
const data = { value: 'data' }  

return  () => <Comp prop1={prop1} attr1={attr1} data={data.value} { ...restProps, ...restAttrs }/>