<!-- 父組件 -->
<template>
  <ChildComponent ref="childRef" />
</template>

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

const childRef = ref(null)

onMounted(() => {
  console.log(childRef.value) // 輸出: Proxy(Object) {...}
})
</script>

const raw = { count: 0 }
const reactiveData = new Proxy(raw, {
  get(target, key, receiver) {
    track(target, key) // 依賴追蹤
    return Reflect.get(...arguments)
  },
  set(target, key, value, receiver) {
    const result = Reflect.set(...arguments)
    trigger(target, key) // 觸發(fā)更新
    return result
  }
})

// 偽代碼展示實(shí)例化過程
const instance = createComponentInstance(vnode)
const proxy = new Proxy(instance, componentPublicInstanceProxyHandlers)

// 公共實(shí)例代理處理器
const componentPublicInstanceProxyHandlers = {
  get(target, key) {
    if (key in target.setupState) {
      return target.setupState[key] // 訪問setup返回的狀態(tài)
    }
    // 處理$el, $data等公共屬性...
  }
}

<!-- 子組件 -->
<script setup>
const internalState = 'secret' // 外部不可訪問
const publicMethod = () => console.log('Hello')

// 未暴露時(shí)
// 父組件訪問childRef.value.publicMethod => undefined
</script>

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

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

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

<script setup>
// 暴露帶狀態(tài)的方法
const api = {
  getState: () => ({ ...internalState }),
  reset: () => initializeState()
}

// 選擇性暴露
defineExpose(
  process.env.NODE_ENV === 'development' 
    ? { ...api, debugInfo }
    : api
)
</script>

// 獲取原始組件實(shí)例
const rawInstance = childRef.value.$

console.log(rawInstance) // 顯示真實(shí)組件實(shí)例

const proxy = childRef.value
console.log(proxy.$el) // 訪問DOM元素
console.log(proxy.$props) // 訪問props對(duì)象

<!-- 父組件 -->
<template>
  <CustomForm ref="formRef" />
  <button @click="validate">提交</button>
</template>

<script setup>
const validate = async () => {
  const isValid = await formRef.value.validate()
  // 處理驗(yàn)證結(jié)果
}
</script>

<!-- 子組件 -->
<script setup>
const validate = () => { /* 驗(yàn)證邏輯 */ }

defineExpose({ validate })
</script>

// 調(diào)用視頻組件API
videoPlayerRef.value.play()

// 圖表組件刷新
chartRef.value.refreshData(newData)

// 不佳
childRef.value.$el.clientWidth

// 優(yōu)化
const el = childRef.value.$el
el.clientWidth

defineExpose({
  // 僅暴露必要的最小接口
  submit: () => { /* ... */ },
  reset: () => { /* ... */ }
})

<script setup lang="ts">
defineExpose({
  count: ref(0),
  increment: () => { /* */ }
})

// 父組件類型聲明
const childRef = ref<{
  count: number
  increment: () => void
}>()
</script>