vue3的setup 语法糖中获取slot 插槽的dom对象

最近使用vue3开发项目，需要封装一个无限滚动的组件，使用scroll组件内置插槽接受模板的方式，所以需要在scroll组件内获取到模板渲染后dom元素的宽高。
但是setup语法糖是组件生命周期的beforeCreate和created中，而且经过测试，在mounted函数中的el属性也是null，所以得出结论模板的slot.default无法直接获取, 必须通过 render 方式对 slot 的 vnode 进行渲染，然后在 render 组件中的 mounted 方法中才能获取到。如下面的例子

容器组件 ScrollView

//ScrollView.vue  scroll容器组件<script setup lang="ts">import{ ref, useSlots }from'vue'import createSlot from'../vnode/createSlot'const slot =useSlots()// 这里获取到的是默认插槽的vnode，但拿不到对应的dom实例const defaultSlot = slots.default && slots.default()[0]// 自定义template 内容mounted事件constmountedCallFun=(args)=>{
  console.log('mounted', args)}// 自定义template 内容updated事件constupdatedCallFun=(args)=>{
  console.log(args)}// 自定义template 内容unMounted卸载事件constunmountedCallFun=(args)=>{
  console.log(args)}const mySlot =createSlot({mountedCallFun, updatedCallFun, unmountedCallFun})onMounted(()=>{// 即使在该组件的mounted钩子中，这个defaultSlot的$el依然为null
  console.log('defaultSlot', defaultSlot)})</script><template><div><mySlot :vnode="defaultSlot"></mySlot></div></template>

render函数渲染slot内容的工厂函数 createSlots.ts

通过 vue官方提供的 defineComponent创建一个组件装载 scrollView组件中的 插槽内容：

//createSlots.tsimport{ defineComponent, h }from"vue"
type CallFun=(vnodeEl: HTMLElement)=>void
type Funs = Record<'mountedCallFun'|'updatedCallFun'|'unmountedCallFun', CallFun>exportdefault({mountedCallFun, updatedCallFun, unmountedCallFun}: Funs)=>{returndefineComponent({props:['vnode'],setup(props, ctx){
      console.log(props, ctx)},mounted(){// console.log(this.$el)mountedCallFun(this.$el)},render(props: any,ctx: any){
      console.log(props, ctx)return props.vnode
    }})}

测试使用 ScrollView组件

<script setup lang="ts">import Text from'../components/text.vue'import ScrollView from'../components/ScrollView.vue'</script><template><div><ScrollView><h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2><h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2><h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2><h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2></ScrollView></div></template>