daiwenzh5 最近的时间轴更新
daiwenzh5

daiwenzh5

V2EX 第 306312 号会员,加入于 2018-04-05 23:17:49 +08:00
vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
  •  1   
    Vue.js  •  daiwenzh5  •  2023-01-04 09:30:24 AM  •  最后回复来自 AllenCai
    78
    关于数据验重的问题
    Java  •  daiwenzh5  •  2021-11-29 20:21:08 PM  •  最后回复来自 onhao
    5
    oracle date 无效的月份
    Oracle  •  daiwenzh5  •  2021-10-05 00:58:00 AM
    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
    webpack externals 外部加载 cdn 文件到底是怎么用的?
    前端开发  •  daiwenzh5  •  2020-08-15 23:41:49 PM  •  最后回复来自 daiwenzh5
    6
    daiwenzh5 最近回复了
    @chnwillliu #3 有道理,后面试试
    @chnwillliu #5 确实不想嵌套的...
    @b821025551b #4 有的,仅仅是 / 不能访问,/xxx 都行
    @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 。
    2023-01-02 15:26:06 +08:00
    回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
    @xiaojie668329 嗯嗯,前几楼上了。
    前端是野路子出生,没习惯这种在线 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>
    2022-12-31 22:36:47 +08:00
    回复了 daiwenzh5 创建的主题 Vue.js vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
    @lalalaqwer #2
    ```ts
    // 额, 我上面是顺序写反了,只是例举它的值
    export const someprops = {
    one: getOne.value,
    }

    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2487 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 15:02 · PVG 23:02 · LAX 08:02 · JFK 11:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.