What the difference with jsx and template in Vue3 ?

[manyuemeiquqi]

I would like to ask about the issue of templates and JSX. In Vue 3, does using JSX introduce performance issues? Does JSX have a performance disadvantage compared to templates? Will JSX become the preferred direction for future maintenance?

[dvlden]

I'm not a part of Vue's core contributors, so I can only reply with what I think.

As both Vue's SFC and JSX gets transpiled to plain JS, I do not think there are any performance penalties. Guessing the output is similar if not identical (haven't tried JSX with Vue).

Aside, I do not believe that Vue will shift at some point to JSX, at least I do not see any reason for it.

[LinusBorg]

Vue templates are more performant because the compiler can do a lot of optimizations from statical analysis of the template. So yes, JSX will be a bit less performant because in JSX, the whole VDOM has to be diffed on every r-render of a component, whereas with Vue templates, the compiler creates an optimized render function that knows which parts of the template are potentially going to change and need diffing, and which parts are actually stable and can be skipped.

We have section in the docs going into more detail:

https://vuejs.org/guide/extras/rendering-mechanism.html#rendering-mechanism

[manyuemeiquqi]

I konw this performant point, what i want to ask is how much does template static optimization contribute to the overall performance optimization of the rendering framework, and in everyday development, do we often encounter performance bottlenecks across the entire framework with JSX ？