expose 支持传入响应式对象

[guaijie]

官方文档并未明确说明 ‘expose’ 只能传入一个 plain object ，但在传入一个 reactive object 时，vue 发出警告：

事实上 ‘expose’ api 允许传入一个 reactive object 是符合直觉的：

// Child Component
const elRef = ref()
expose(elRef)
onMounted(() => {
  console.log(elRef.value) // HTMLDivElement
})
return <div ref={elRef}></div>

// Parent Component
const elRef = ref()
onMounted(() => {
  console.log(elRef.value) // HTMLDivElement
})
return <Child ref={elRef}></Child >

以上代码我们可以看到，直接访问宿主组件 div 的 dom 节点和访问 Child 的 dom 节点是代码一致的。无需通过一个中间对象的属性来访问

// Child Component
const elRef = ref()
expose({getEL: () => elRef.value})
onMounted(() => {
  console.log(elRef.value) // HTMLDivElement
})
return <div ref={elRef}></div>

// Parent Component
const elRef = ref()
onMounted(() => {
  console.log(elRef.value?.getEL()) // HTMLDivElement
})
return <Child ref={elRef}></Child >

以上代码我们可以看到，访问宿主组件 div 的 dom 节点和访问 Child 的 dom 节点行为是不一致的。需要通过一个中间对象的属性来访问。

同时，支持 expose 一个 reactive object 可以让开发者更好的进行二次组件的封装

const selectRef = useRef()
// 一次性 expose 原组件的所有 api
expose(selectRef)
const Comp = () => <ASelect ref={selectRef} />