Template render vs render function h() in Vue 3

Question

What do you think regarding template rendering in Vue 3 (or in composition-api), especially how fast and light it would be?

We create a site constructor with simple components under the hood (something like ui-box, ui-button, etc.) In Vue 2 for most of them, we use functional components with rendering via h() function in order to make their render much faster and lighter since we expect a lot of these components on the scene. As I know in Vue 3 template rendering will be faster and have better performance.

What do you think about that? When Vue 3 comes should we still use h() or we can use the usual template render?

Answer 1

The flexibility of render functions gives them a lot of power, but their imperative nature makes them difficult to (automatically) optimise. Personally, when using Vue 3 I use templates when ever possible, due to the virtual DOM diffing optimisations. A good overview I've found of this is by Evan You, here.

Your best bet is to benchmark both and see the performance, Vue.js Devtools is a great help with this.