V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
857681664
V2EX  ›  程序员

vue3 在 template 文件中引入 hook js 文件中暴露的 ref 变量,无法监听到 hook js 中对 ref 变量的修改

  •  
  •   857681664 ·
    zshnb · 2023-01-28 17:56:13 +08:00 · 1141 次点击
    这是一个创建于 692 天前的主题,其中的信息可能已经有所发展或是发生改变。

    // 自定义 hook useXXX.js

    const loadingRef = ref(false)
    async () => {
        loadingRef.value = true
        await fetch api
        loadingRef.value = false
    }
    

    在 js 文件里都能正常 watch 到 ref 变量的变化,在 template 文件中引入

    // xxx.vue

    const {loadingRef} = useXXX
    

    这里就无法监听到 ref 变量的变化了,有前端大佬知道这个是什么原因吗,要怎么才能在 template 文件中监听到这个 ref 变量的变化呢

    9 条回复    2023-01-28 18:37:09 +08:00
    kingterrors
        1
    kingterrors  
       2023-01-28 18:06:23 +08:00
    建议写个可运行的 demo ,比如 sandbox 。理论上不应该在模板上不响应。
    kingterrors
        2
    kingterrors  
       2023-01-28 18:08:29 +08:00
    Huelse
        3
    Huelse  
       2023-01-28 18:09:48 +08:00
    有 export 吗?
    857681664
        4
    857681664  
    OP
       2023-01-28 18:17:44 +08:00
    @kingterrors 好主意,我去写一个最小 demo
    857681664
        5
    857681664  
    OP
       2023-01-28 18:18:01 +08:00
    @Huelse export 的是 useXXX 函数,在函数里 return 了 ref 变量
    Huelse
        6
    Huelse  
       2023-01-28 18:26:06 +08:00
    @857681664 那应该是使用姿势不对吧,试了下: https://codesandbox.io/s/still-wood-er46w5?file=/src/App.vue
    muzlin
        7
    muzlin  
       2023-01-28 18:31:18 +08:00
    @857681664 看看作用域
    857681664
        8
    857681664  
    OP
       2023-01-28 18:32:21 +08:00
    @Huelse
    @muzlin https://codesandbox.io/s/intelligent-cerf-pbz5xe?file=/src/App.vue ,刚写了个最小 demo ,可以看一下 console 和页面上的值变化
    857681664
        9
    857681664  
    OP
       2023-01-28 18:37:09 +08:00
    绝了, demo 里又可以了,但我自己的应用就是不行,我再研究一下,感谢 2 位大佬
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   995 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:13 · PVG 04:13 · LAX 12:13 · JFK 15:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.