@
johnkiller #11 非常感谢你的 demo ，看了你的例子，我发现可能是我描述的不够准确，我希望的是在组件中传递一个 value ，而不是一个 ref ，因此在解构后就丢失了响应式，如：
https://codesandbox.io/s/vue3-jsx-demo-vcjpmo?file=/src/components/Demo1.vue正如 demo1 ，所有的行为是符合预期的，但是当 hooks 里面返回的 props 存在多个时，手动设置就太麻烦了，所以我希望的时如 demo2 、demo3 那样，在组件中直接解构 props ，但是在这种情况下，响应式就丢失了，我不知道怎么处理更好一点。
具体的代码如下：
```vue
<script>
// demo1
import { defineComponent, ref, computed } from "vue";
function useCounter() {
const number = ref(0);
const count = computed(() => number.value + 1);
return {
// count 是一个 ref
count,
number,
};
}
export default defineComponent({
setup() {
const { count, number } = useCounter();
return () => {
// 传递 count 为 value
return <Display count={count.value} number={number} />;
};
},
});
function Display(props) {
return (
<div>
<button onClick={() => props.number.value++}>inc</button>
<div>{props.count}</div>
</div>
);
}
</script>
```vue
<script>
// demo2
import { defineComponent, ref, computed } from "vue";
function useCounter() {
const number = ref(0);
const count = computed(() => number.value + 1);
return {
// count 是一个 ref
count,
number,
};
}
export default defineComponent({
setup() {
const counter = useCounter();
return () => {
// 解构 count 为 ref
return <Display {...counter} />;
};
},
});
function Display(props) {
return (
<div>
<button onClick={() => props.number.value++}>inc</button>
<div>{props.count}</div>
</div>
);
}
</script>
```
```vue
<script>
// demo3
import { defineComponent, ref, computed } from "vue";
function useCounter() {
const number = ref(0);
const count = computed(() => number.value + 1);
return {
// count 是一个 value
count: count.value,
number,
};
}
export default defineComponent({
setup() {
const counter = useCounter();
return () => {
// 解构 count 是一个 value
return <Display {...counter} />;
};
},
});
function Display(props) {
return (
<div>
<button onClick={() => props.number.value++}>inc</button>
<div>{props.count}</div>
</div>
);
}
</script>