使用Vue3响应式转换宏与defineExpose()导致ref响应性失效咨询

为什么$ref()无法维持响应性 #

$ref()是Vue的响应式语法糖，编译阶段会自动处理.value的读写，但当用$ref()定义的变量通过defineExpose暴露时，它会被自动解包成原始值，而非保留ref对象。

父组件里用const child = $ref()拿到子组件引用后，child?.text获取的只是子组件初始化时的"hello"普通字符串，子组件输入框更新text时，父组件根本感知不到——因为暴露的不是响应式ref，只是个静态值。

而用标准ref()时，子组件暴露的是完整的ref对象，父组件访问child.text时，Vue模板会自动解包ref，自然能响应变化。

两种修复方法 #

方法一：子组件用标准ref()定义暴露变量 #

直接在子组件放弃$ref()语法糖，用ref()创建响应式变量，这样暴露的就是ref对象，父组件不管用$ref()还是ref()都能正常响应：

<!-- Child.vue -->
<template>
  <input v-model="text" />
</template>

<script setup>
import { ref } from 'vue'
const text = ref('hello')
defineExpose({ text })
</script>

方法二：父组件手动监听同步（不推荐） #

如果非要在子组件用$ref()，父组件可以通过watch手动同步值，但这种写法冗余，不如第一种简洁：

<!-- App.vue -->
<template>
  <Child ref="child" />
  <p>Child text: {{ localText }}</p>
</template>

<script setup>
import Child from './Child.vue'
import { watch, $ref } from 'vue'
const child = $ref()
const localText = $ref('hello')

// 监听子组件text变化，同步到本地
watch(() => child?.text, (newVal) => {
  localText = newVal
}, { immediate: true })
</script>

总结 #

核心问题就是$ref()在defineExpose时会自动解包变量，导致父组件拿不到响应式的ref引用。最直接的解决方式就是在子组件中用标准ref()来定义需要暴露的响应式变量，确保暴露的是ref对象而非原始值。

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