daiwenzh5 最近的时间轴更新 daiwenzh5 最近的时间轴更新 |
daiwenzh5V2EX 第 306312 号会员，加入于 2018-04-05 23:17:49 +08:00 |
| 关于使用 flex 实现数字键盘的问题讨论：如何计算？ CSS • daiwenzh5 • 2023-08-16 21:53:46 PM • 最后回复来自 twf199410406 | 9 |
| nginx 部署页面根路径访问 403，但是使用任何前缀如 /web 就正常了 NGINX • daiwenzh5 • 2023-03-04 14:00:53 PM • 最后回复来自 dorothyREN | 13 |
| vue3 里面使用 jsx 解构属性，响应式丢失了，怎么处理
1 Vue.js • daiwenzh5 • 2023-01-04 09:30:24 AM • 最后回复来自 AllenCai
|
78 |
| Java 中使用枚举参数，如何进行 JSR303 校验意外值? 或者说参数是否直接使用枚举类型 Java • daiwenzh5 • 2022-08-06 17:48:37 PM • 最后回复来自 daiwenzh5 | 18 |
| oracle date 无效的月份 Oracle • daiwenzh5 • 2021-10-05 00:58:00 AM |
| 求教， springboot 元数据自动提示，如何配置 map、list 类型（也能正确提示） Java • daiwenzh5 • 2021-08-27 15:57:53 PM • 最后回复来自 Kyle18Tang | 5 |
| idea 中 spring @Value 如何显示属性值、和配置文件互跳？ V2EX • daiwenzh5 • 2021-03-24 13:42:47 PM • 最后回复来自 zydxn | 1 |
| JAXB 2.x 注解 @XmlElementWrapper 设置属性 Java • daiwenzh5 • 2020-08-19 21:10:49 PM |
daiwenzh5 最近回复了
2023-08-16 21:04:54 +08:00 回复了 daiwenzh5 创建的主题 › CSS › 关于使用 flex 实现数字键盘的问题讨论：如何计算？ |
@chnwillliu #3 有道理，后面试试
2023-08-16 21:03:30 +08:00 回复了 daiwenzh5 创建的主题 › CSS › 关于使用 flex 实现数字键盘的问题讨论：如何计算？ |
@chnwillliu #5 确实不想嵌套的...
2023-03-03 16:50:45 +08:00 回复了 daiwenzh5 创建的主题 › NGINX › nginx 部署页面根路径访问 403，但是使用任何前缀如 /web 就正常了 |
@b821025551b #4 有的，仅仅是 / 不能访问，/xxx 都行
2023-03-03 16:26:01 +08:00 回复了 daiwenzh5 创建的主题 › NGINX › nginx 部署页面根路径访问 403，但是使用任何前缀如 /web 就正常了 |
@SKYNE #1 刚刚看了 getenforce 是 Permissive
2023-01-03 10:06:37 +08:00 回复了 daiwenzh5 创建的主题 › Vue.js › vue3 里面使用 jsx 解构属性，响应式丢失了，怎么处理 |
#28 说的正是我的问题所在，使用 reactive 也确实解决了。我之前的代码也是可以运行的，但是太啰嗦了，reactive 使得响应式不用加 value ，直接解构简洁了不少，看起来舒服多了。
那个解决问题就好了，能交流是好事，不要吵架🫰🫰🫰
那个解决问题就好了，能交流是好事，不要吵架🫰🫰🫰
2023-01-02 15:33:29 +08:00 回复了 daiwenzh5 创建的主题 › Vue.js › vue3 里面使用 jsx 解构属性，响应式丢失了，怎么处理 |
@johnkiller 看你的例子应该是解决了我的问题的，现在在车上，等下试试。
vue3 刚开始用，看别人的教程一直用 ref ，说是可以通过编译器提示响应式变量，没怎么用过 reactive 。
vue3 刚开始用，看别人的教程一直用 ref ，说是可以通过编译器提示响应式变量，没怎么用过 reactive 。
2023-01-02 15:26:06 +08:00 回复了 daiwenzh5 创建的主题 › Vue.js › vue3 里面使用 jsx 解构属性，响应式丢失了，怎么处理 |
@xiaojie668329 嗯嗯，前几楼上了。
前端是野路子出生，没习惯这种在线 demo ，上面有个老哥给了我提醒，前端这种确实方便。
前端是野路子出生，没习惯这种在线 demo ，上面有个老哥给了我提醒，前端这种确实方便。
2023-01-02 00:15:12 +08:00 回复了 daiwenzh5 创建的主题 › Vue.js › vue3 里面使用 jsx 解构属性，响应式丢失了，怎么处理 |
@daiwenzh5 #15 感谢每一个愿意给出答复的人，我应该直接上 demo 的，谢罪！
2023-01-02 00:06:42 +08:00 回复了 daiwenzh5 创建的主题 › Vue.js › vue3 里面使用 jsx 解构属性，响应式丢失了，怎么处理 |
@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>
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>
2022-12-31 22:36:47 +08:00 回复了 daiwenzh5 创建的主题 › Vue.js › vue3 里面使用 jsx 解构属性，响应式丢失了，怎么处理 |
Select Language