daiwenzh5

@chnwillliu #3 有道理，后面试试

@chnwillliu #5 确实不想嵌套的...

@b821025551b #4 有的，仅仅是 / 不能访问，/xxx 都行

@SKYNE #1 刚刚看了 getenforce 是 Permissive

#28 说的正是我的问题所在，使用 reactive 也确实解决了。我之前的代码也是可以运行的，但是太啰嗦了，reactive 使得响应式不用加 value ，直接解构简洁了不少，看起来舒服多了。
那个解决问题就好了，能交流是好事，不要吵架🫰🫰🫰

@johnkiller 看你的例子应该是解决了我的问题的，现在在车上，等下试试。
vue3 刚开始用，看别人的教程一直用 ref ，说是可以通过编译器提示响应式变量，没怎么用过 reactive 。

@xiaojie668329 嗯嗯，前几楼上了。
前端是野路子出生，没习惯这种在线 demo ，上面有个老哥给了我提醒，前端这种确实方便。

@daiwenzh5 #15 感谢每一个愿意给出答复的人，我应该直接上 demo 的，谢罪！

@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>