上下文暴露(expose API)

在Vue.js中，上下文暴露（Expose API）是一种将组件内部状态或方法暴露给父组件或其他外部调用的机制。通过expose选项或defineExpose宏，开发者可以精确控制哪些内容可被外部访问，同时保持组件的封装性。

理解上下文暴露的基本概念

Vue 3的Composition API引入了expose功能，允许组件明确声明哪些属性和方法可以被外部访问。默认情况下，使用setup()函数时，所有绑定的响应式数据和方法都会自动暴露。但通过expose可以限制这种暴露行为。

// 子组件 Child.vue
<script setup>
import { ref } from 'vue'

const internalState = ref('secret')
const publicMethod = () => console.log('Called from parent')

defineExpose({
  publicMethod
})
</script>

使用Options API时的expose

在Options API中，可以通过expose选项来指定暴露内容：

// 子组件 Child.vue
export default {
  data() {
    return {
      privateData: 'hidden',
      publicData: 'accessible'
    }
  },
  methods: {
    privateMethod() { /* ... */ },
    publicMethod() { /* ... */ }
  },
  expose: ['publicData', 'publicMethod']
}

Composition API中的defineExpose

<script setup>语法糖下使用defineExpose更为常见：

<script setup>
const count = ref(0)
const increment = () => count.value++

defineExpose({
  count,
  increment
})
</script>

父组件如何访问暴露的API

父组件通过模板引用（ref）访问暴露的内容：

// 父组件 Parent.vue
<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

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

const childRef = ref(null)

const callChildMethod = () => {
  childRef.value.publicMethod()
  console.log(childRef.value.count)
}
</script>

实际应用场景

表单组件验证

暴露验证方法供父组件调用：

// FormComponent.vue
<script setup>
const validate = () => {
  // 验证逻辑
  return isValid
}

defineExpose({ validate })
</script>

// 父组件
const submit = () => {
  if (formRef.value.validate()) {
    // 提交表单
  }
}

复杂组件控制

视频播放器组件暴露控制方法：

// VideoPlayer.vue
<script setup>
const play = () => { /* ... */ }
const pause = () => { /* ... */ }
const seek = (time) => { /* ... */ }

defineExpose({ play, pause, seek })
</script>

与provide/inject的区别

上下文暴露与provide/inject的主要差异在于：

• expose是纵向的父子组件通信
• provide/inject是跨层级的数据传递
• expose更适合精确控制接口
• provide/inject更适合全局状态共享

TypeScript支持

为暴露的API添加类型定义：

// Child.vue
<script setup lang="ts">
const count = ref(0)
const increment = (step: number) => count.value += step

defineExpose({
  count,
  increment
})
</script>

// 父组件中
const childRef = ref<{
  count: number
  increment: (step: number) => void
}>()

注意事项

1. 避免过度暴露：只暴露必要的接口
2. 命名冲突：确保暴露的属性名不与原生DOM属性冲突
3. 响应性：暴露的ref会自动解包
4. 生命周期：确保在组件挂载后访问ref

高级模式：动态暴露

根据条件动态决定暴露内容：

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

const adminMode = ref(false)
const sensitiveMethod = () => { /* ... */ }

defineExpose(computed(() => 
  adminMode.value ? { sensitiveMethod } : {}
))
</script>

与模板引用的交互

模板引用和expose的结合使用：

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

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

const inputRef = ref(null)

defineExpose({
  focus: () => inputRef.value.focus()
})
</script>

性能考量

1. 暴露大量数据可能影响内存
2. 频繁的暴露更新可能导致性能问题
3. 建议对复杂对象使用shallowRef

与其他框架的对比

React的useImperativeHandle类似Vue的expose：

// React对比
useImperativeHandle(ref, () => ({
  publicMethod: () => { /* ... */ }
}))

调试技巧

检查组件暴露了哪些API：

// 控制台调试
console.log(childRef.value)