daiwenzh5 最近的时间轴更新
daiwenzh5

daiwenzh5

V2EX 第 306312 号会员,加入于 2018-04-05 23:17:49 +08:00
vue3 里面使用 jsx 解构属性,响应式丢失了,怎么处理
  •  1   
    Vue.js  •  daiwenzh5  •  151 天前  •  最后回复来自 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
    vuex 更新多级数据,如何使用比较好?
  •  1   
    Vue.js  •  daiwenzh5  •  2020-05-11 19:27:03 PM  •  最后回复来自 daiwenzh5
    8
    daiwenzh5 最近回复了
    @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>
    @lalalaqwer #2
    ```ts
    // 额, 我上面是顺序写反了,只是例举它的值
    export const someprops = {
    one: getOne.value,
    }

    ```
    @suzic #3 toRefs 之后所有的属性都是 ref ,解构后就不对了,实际上需要 ref.value 的值
    @shakukansp #1 对啊,one 只是 someprops 的一个属性,所以才需要解构啊
    关于   ·   帮助文档   ·   博客   ·   nftychat   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2425 人在线   最高记录 5634   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 06:34 · PVG 14:34 · LAX 23:34 · JFK 02:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.