What is the best render function in vue 3 script setup?

[xlaussel]

I am trying to mimic the <component> component behavior in vue 3 using composition API and script setup in various ways. Here is the first attempt:

<script setup lang="ts">
import {type Component, h, useSlots} from "vue";

const props=defineProps<{is:Component|string,name:string}>()
const slots=useSlots()
// @ts-ignore
const render=h(props.is,{name:props.name},slots)
</script>
<template>
  <render/>
</template>

It works well, and I can see in the devtool that the "is" component passed as prop is a direct child of the wrapper component. The attrs are passed to the underlying "is" component and it is reactive to attrs change. But it isn't reactive on props change: A change of the name prop is not taken into account.
I fix it by adding a computed:

const render=computed(()=>h(props.is,{name:props.name},slots))

Works like a charm like it but maybe there is to much call to the h function and I am afraid that all the v-node hierarchy will maybe be recomputed each time there is a change. And so maybe vue will loose time reconciliating the v-node and the Dom?

So I tryed:

const render=()=>h(props.is,{name:props.name},slots)

OK but the attrs are not passed to the underlying "is" component.
So last I did:

const attrs=useAttrs()
render=()=>h(props.is,mergeProps(attrs,{name:props.name}),slots)

Works perfectly but I can see in the devtool that the resulting hierarchy is more complicated: The Wrapper has a child "Render" component which in turn has the underlying "is" component as a child.

So do you have an idea of what is the best between the "computed" and the "mergeProps" solution in terms of performance? It looks like the "mergeProps" is replicating the vue internal merge of attrs and props, not very efficient... But maybe the rendering is faster because the entire v-node is not recreated on each change? (but maybe it is recomputed entirely also?).

[xlaussel]

Any answer?

[Shyam-Chen]

Try this:

<script lang="ts" setup>
const Render = () => {
  return h('span', null, result);
};
</script>

<template>
  <Render />
</template>

[xlaussel]

Thank you @Shyam-Chen but the problem is that the 'attrs' are not passed to the <Render/>

[s3xysteak]

I am not sure what you want. In my experience, functional components are rarely needed. Maybe defineComponent is what you want. That may be helpful for you https://vuejs.org/guide/extras/render-function.html .

---

<script setup lang="ts">
// @ts-ignore
const render=h(props.is,{name:props.name},slots)
</script>

<template>
  <render/>
</template>

The code here is definitely wrong. A vnode cannot be used like component. The smallest unit of a component is a render function(Also could be named functional component). Like const comp = () => h('div', 'hello world'). Render function will be called again and again at the right time to keep reactive. So it is unnecessary to use computed(() => h('div')).

The smallest unit of a component - render function - is rarely needed. Maybe defineComponent should be better for you.

<script setup lang="ts">
const Comp = defineComponent(() => {
  // Here is `setup`.
  return () => h('div') // return a render function.
})
</script>

<template>
  <Comp />
</template>

Although I recommend you use sfc, but what you want looks like a raw ts/js component (Like React). You can just use:

// MyComp.ts
export default defineComponent((props: { hi: string }) => {
  return () => h('div', props.hi)
}, {
  props: ['hi']
})

Which is equal to:

<script setup lang="ts">
// MyComp.vue
defineProps<{ hi: string }>()
</script>

<template>
  <div>
    {{ hi }}
  </div>
</template>

(SFC has better compile-time optimization.)

[xlaussel]

Thank you @s3xysteak for yous answer.
You are right, theorically a vnode cannot be used like a component and the smallest unit of a component is a render function. But it works, why?
So the const comp = h(props.is,{name:props.name},slots) is OK but it is not reactive on attrs change: attrs are passed to the default slot but a change on attrs doesn't trigger a component update.

[s3xysteak]

In my understanding, render function will be called again and again, that is why we need to pass the raw value instead of a full ref to h(). It just look like - a simplified version like this:

import { ref, effect } from '@vue/reactivity'
const val = ref('hi')

// --- () => h('div', hi.value)
const el = document.querySelector('div')

effect(() => {
  el.innerHTML = val.value
})
// --- () => h('div', hi.value)

The render function will be called at the correct time to update. If you just pass a h() - which is just a object - of course it cannot be updated.