组件实例的暴露方式

在Vue3中，组件实例的暴露机制是组合式API的核心特性之一。通过expose和ref等API，开发者可以精确控制组件对外暴露的属性和方法，同时利用模板引用来直接访问DOM或子组件实例。这种设计既提供了灵活性，又保持了封装性。

组件实例的基本暴露方式

默认情况下，Vue3组件会暴露以下内容：

1. 通过setup()返回的对象中的所有属性
2. 组件选项中的data、computed、methods等

// 子组件 Child.vue
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}

// 父组件中使用
<template>
  <Child ref="childRef" />
</template>

<script setup>
import { ref } from 'vue'
const childRef = ref(null)
// 可以访问 childRef.value.count 和 childRef.value.increment
</script>

使用expose控制暴露内容

通过expose函数可以精确控制要暴露的内容：

// 子组件
export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => count.value++
    const reset = () => (count.value = 0)
    
    // 只暴露increment方法
    expose({
      increment
    })
    
    return { count, increment, reset }
  }
}

// 父组件中
childRef.value.increment() // 可用
childRef.value.reset() // 报错，未暴露
childRef.value.count // 报错，未暴露

模板引用与组件实例

在组合式API中，模板引用通过ref实现：

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

<script setup>
import { ref, onMounted } from 'vue'

const childRef = ref(null)
const inputRef = ref(null)

onMounted(() => {
  console.log(childRef.value) // 子组件实例
  console.log(inputRef.value) // DOM元素
})
</script>

组件类型推断与TypeScript

在TypeScript环境下，可以为组件引用声明类型：

// 子组件
const Child = defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
})

// 父组件
<template>
  <Child ref="childRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const childRef = ref<InstanceType<typeof Child> | null>(null)
// 现在有类型提示
childRef.value?.increment()
</script>

多组件引用处理

当需要处理多个相同组件的引用时：

<template>
  <Child v-for="i in 3" :key="i" :ref="setChildRef" />
</template>

<script setup>
import { ref } from 'vue'

const childRefs = ref([])
const setChildRef = el => {
  if (el) childRefs.value.push(el)
}
</script>

动态组件与实例暴露

动态组件同样支持实例暴露：

<template>
  <component :is="currentComponent" ref="dynamicComponentRef" />
</template>

<script setup>
import { shallowRef } from 'vue'

const currentComponent = shallowRef(ComponentA)
const dynamicComponentRef = ref(null)
</script>

高阶组件中的实例穿透

在高阶组件中转发子组件实例：

// HOC组件
export default defineComponent({
  setup(_, { expose }) {
    const childRef = ref(null)
    
    expose({
      getChildInstance: () => childRef.value
    })
    
    return () => h(Child, { ref: childRef })
  }
})

渲染函数中的引用处理

使用渲染函数时的手动ref处理：

export default {
  setup() {
    const root = ref(null)
    
    return () => 
      h('div', { ref: root }, [
        h(Child, { ref: 'child' })
      ])
  }
}

组件实例的生命周期

暴露的实例在不同生命周期阶段的可访问性：

<template>
  <Child v-if="show" ref="childRef" />
</template>

<script setup>
import { ref, watch } from 'vue'

const show = ref(true)
const childRef = ref(null)

watch(show, (newVal) => {
  console.log(childRef.value) // 根据show的值变化
})
</script>

组件方法的异步调用

处理异步场景下的实例访问：

const childRef = ref(null)

const handleAsync = async () => {
  await nextTick()
  childRef.value?.someMethod()
}

组件实例的调试技巧

开发时检查实例内容的技巧：

onMounted(() => {
  // 在控制台检查组件实例
  console.log(childRef.value)
  
  // 或临时暴露所有内容
  childRef.value.$el.__vue__ // 访问内部实例(不推荐生产环境使用)
})

与Vue2的对比

Vue2中的实例访问方式：

// Vue2选项式API
this.$refs.childRef.methodName()

Vue3中的变化：

1. 需要显式声明ref
2. 通过expose控制暴露内容
3. 更好的TypeScript支持

性能考量

频繁访问组件实例可能带来的性能问题：

// 避免在渲染函数中频繁访问
const BadExample = {
  setup() {
    const childRef = ref(null)
    return () => {
      // 每次渲染都会执行
      if (childRef.value) {
        childRef.value.update()
      }
      return h(Child, { ref: childRef })
    }
  }
}

边界情况处理

处理可能为null的实例引用：

// 安全的访问方式
const value = childRef.value?.someProp ?? defaultValue

// 方法调用保护
childRef.value?.someMethod?.()