如何阻止Vue中defineExpose自动解包Ref？

Vue在defineExpose中会自动解包顶层的Ref，这是为了和Options API的实例属性行为保持一致。但要阻止这种自动解包，有两种简单可行的方法：

方法一：将Ref包裹在对象中暴露 #

把需要暴露的Ref放到一个对象的属性里，Vue不会递归解包嵌套对象里的Ref，这样父组件就能拿到原始的Ref实例：

子组件代码示例：

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

// 用对象包装Ref后暴露
defineExpose({
  refs: {
    targetRef
  }
})
</script>

<template>
  <div ref="targetRef">目标元素</div>
</template>

父组件中使用：

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
import useElementSize from './useElementSize'

const childRef = ref(null)
let sizeObserver = null

onMounted(() => {
  // 获取未被解包的原始Ref
  const targetRef = childRef.value.refs.targetRef
  sizeObserver = useElementSize(targetRef)
})
</script>

<template>
  <Child ref="childRef" />
</template>

方法二：暴露一个返回Ref的函数 #

通过暴露函数的方式，让父组件调用函数获取原始Ref，这种方式也能避免自动解包：

子组件代码示例：

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

defineExpose({
  getTargetRef: () => targetRef
})
</script>

父组件中使用：

<script setup>
// ...其他代码
onMounted(() => {
  const targetRef = childRef.value.getTargetRef()
  sizeObserver = useElementSize(targetRef)
})
</script>

这两种方法都能让你在父组件中拿到未被解包的Ref，直接传给useElementSize组合式函数使用，不需要修改原本的尺寸监听逻辑。

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