Vue3中无法通过$refs组件实例更新数据，有无可行解决方案？

前提说明 #

你提到的「Vue3引入Promise对象导致无法通过$refs更新组件数据」是误解，本质原因是Vue3 <script setup> 语法默认封闭组件实例，仅显式通过defineExpose声明的属性/方法会对外暴露，Quasar官方组件的内部响应式状态默认没有暴露，因此直接通过$refs拿到的实例无法直接修改内部数据，和Promise本身无关。

可行方案 #

方案1：封装Quasar组件自定义Wrapper（最推荐） #

对需要操作的Quasar组件做一层轻量封装，将需要修改的内部状态或操作方法显式对外暴露，不会和Quasar版本强绑定，可维护性最高。
示例代码（以封装QTable组件为例）：

<!-- 组件文件：WrappedQTable.vue -->
<template>
  <q-table ref="rawQuasarInst" v-bind="$attrs" v-on="$listeners" />
</template>

<script setup>
import { ref } from 'vue'
const rawQuasarInst = ref(null)

defineExpose({
  // 自定义暴露操作方法，外部调用无需关心Quasar内部实现
  updatePage: (newPage) => {
    rawQuasarInst.value.pagination.page = newPage
  },
  updateFilter: (filterConfig) => {
    rawQuasarInst.value.filter = filterConfig
  },
  // 也可以直接暴露原始Quasar组件实例，方便灵活操作
  getRawInst: () => rawQuasarInst.value
})
</script>

父组件使用时直接调用暴露的方法即可：

const wrappedTable = ref(null)
// 直接调用自定义方法更新组件状态，无需在父组件维护分页变量
wrappedTable.value.updatePage(3)

方案2：直接访问组件私有属性（应急用） #

如果不想封装组件，可以直接访问Vue3组件实例的私有属性拿到内部状态，不推荐长期在生产环境使用，Vue/Quasar版本迭代可能修改私有属性命名导致代码失效。
示例代码：

import { ref, onMounted, nextTick } from 'vue'
const quasarCompRef = ref(null)

onMounted(async () => {
  await nextTick()
  // 访问setupState拿到组件内部的响应式状态
  const innerState = quasarCompRef.value._.setupState
  // 直接修改即可生效，比如修改QBtn的loading状态
  innerState.loading = true
})

注意事项 #

• 所有对第三方组件内部状态的直接修改都属于强耦合操作，优先使用组件官方暴露的Props和事件做状态同步，只有当props/事件无法满足需求时再使用上述方案
• Vue3的$refs不是响应式的，仅能在组件挂载完成后（onMounted钩子或事件回调中）访问，访问前建议先判断实例是否存在避免报错

内容的提问来源于stack exchange，提问作者Jousi