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

[857681664]

// 自定义 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 变量的变化呢

[kingterrors]

建议写个可运行的 demo ，比如 sandbox 。理论上不应该在模板上不响应。

[kingterrors]

修正：codesandbox.io

[Huelse]

有 export 吗？

[857681664]

@kingterrors 好主意，我去写一个最小 demo

[857681664]

@Huelse export 的是 useXXX 函数，在函数里 return 了 ref 变量

[Huelse]

@857681664 那应该是使用姿势不对吧，试了下： https://codesandbox.io/s/still-wood-er46w5?file=/src/App.vue

[muzlin]

@857681664 看看作用域

[857681664]

@Huelse
@muzlin https://codesandbox.io/s/intelligent-cerf-pbz5xe?file=/src/App.vue ，刚写了个最小 demo ，可以看一下 console 和页面上的值变化

[857681664]

绝了, demo 里又可以了，但我自己的应用就是不行，我再研究一下，感谢 2 位大佬