vue3 watch中赋值的ref数组数据不是响应式？

作者站长头像
站长
· 阅读数 8
export function useRoomUsers(roomId) {
    let executorList = ref([])
    RoomApi.findRoomUsers({roomId}).then(res => {
        executorList.value = res.data;
    })
    return { executorList }
}
// const { executorList } = useRoomUsers(11)
        // console.log('executorList', executorList)
        let executorList = ref([])
        watch(() => searchForm.roomId, (val) => {
            if (val) {
                executorList.value = useRoomUsers(val).executorList
                console.log('executorList', executorList)
            }
        })
        return { executorList }

useRoomUsers是一个异步获取数据方法返回ref对象，用解构方式获取的数据是可以正常响应的。但业务需要放在watch当中就不行了。试过把返回的地方改成reactive 直接这边数组都是空的，理解不了，求大神指点。

就很奇怪获取value是空的，但打印出来数组是有数据的vue3 watch中赋值的ref数组数据不是响应式？

回复
1个回答
avatar
test
2024-07-15
export function useRoomUsers(roomId) {
    let executorList = ref([])
    function doFetch() {
        executorList.value = []
        if (unref(roomId)) {
            RoomApi.findRoomUsers({roomId: unref(roomId)}).then(res => {
                executorList.value = res.data;
            })
        }
    }
    if (isRef(roomId)) {
        // 若输入的 URL 是一个 ref，那么启动一个响应式的请求
        watchEffect(doFetch)
      } else {
        // 否则只请求一次
        doFetch()
      }
    return { executorList }
}
const roomId = computed(() => { 
    return searchForm.value.roomId
})
const { executorList } = useRoomUsers(roomId)

改成这样可以了，之前直接用的searchForm.value.roomId不会触发watchEffect，后面的判断也得用unref解包。说实话还是疑惑除了解构方式 直接value赋值为啥不行。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容