vue3 ref 的值问题 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
allzc
V2EX    Vue.js

vue3 ref 的值问题

  •  
  •   allzc 2023-09-26 20:45:50 +08:00 1954 次点击
    这是一个创建于 808 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我定义了一个 const tempArr = ref([]); 然后 tempArr.value = newArrayList; console.log(tempArr.value); 当前组建能打印出 tempArr.value 的具体值 也就是 newArrayList 的值

    但是我传递到另一个 js 文件中,接收后 发现接收的值是空的 即 Proxy(Array){} chatGPT 说是 这样直接赋值会损失响应性 正确赋值方式 tempArr.value.push(...newArrayList);
    试了下 确实可以

    但之前 const object = ref({}); object.value = newObject; 我好像也没出错(可能只在当前同一个组件中,没有跨 js ) 我没太明白 请大佬解释下

    10 条回复    2023-09-27 13:57:37 +08:00
    allzc
        1
    allzc  
    OP
       2023-09-26 20:50:08 +08:00
    我对象也试了下 跨 js 确实会失败 当前组建直接用不受影响
    NerbraskaGuy
        2
    NerbraskaGuy  
       2023-09-26 20:54:08 +08:00
    你说的跨组件使用那种是全局变量,app.config.globalProperties 绑定然后各实例再调用
    allzc
        3
    allzc  
    OP
       2023-09-26 20:59:39 +08:00 via iPhone
    @NerbraskaGuy 我换种输值就可以直接传输用的 用 push(...) 另一个 js 能接收到的
    iOCZ
        4
    iOCZ  
       2023-09-26 21:03:52 +08:00
    怎么传到另一个 js 文件?
    leoleoasd
        5
    leoleoasd  
       2023-09-26 23:00:00 +08:00
    我猜你把 ref.value 传入了其他文件的函数?
    应该把整个 ref 传到其他函数里,而不是 ref 的 value ?
    ref 的 value 可以理解为一个指针,Push 操作是 in place 的,但是直接赋值就让指针指向了其他对象;如果把 ref.value 传入到别的函数后 ref 变动,自然无法接受到变动,因为『别的函数』持有的是指向旧内容的指针
    allzc
        6
    allzc  
    OP
       2023-09-26 23:19:47 +08:00 via iPhone
    @iOCZ 通过 pinia ,A 通过 store 中的方法 F 传值给 store ,B 监听 store 中的方法 F ,F 触发,B 从 store 中拿出传入的值做处理
    allzc
        7
    allzc  
    OP
       2023-09-26 23:23:15 +08:00 via iPhone
    @leoleoasd 你说的应该是对的,我明天 try 一下,大佬牛逼!
    linkopeneyes
        8
    linkopeneyes  
       2023-09-27 09:20:11 +08:00
    我猜你是把 value 值传过去了?直接传用 ref 定义的变量应该就可以了
    linkopeneyes
        9
    linkopeneyes  
       2023-09-27 09:22:15 +08:00
    @allzc 你这个 pinia 的存取流程也太麻烦了,如果你不需要回溯之类的复杂功能可以直接拿 ref 实现一个全局 store,vue 官网有例子 https://cn.vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api
    FakerLeung
        10
    FakerLeung  
       2023-09-27 13:57:37 +08:00
    不要把 .value 传递过去,直接把整个 ref 传过去即可。此贴完结撒花。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     885 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 22:36 PVG 06:36 LAX 14:36 JFK 17:36
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86