Vue template vs Vue jsx - vue.js

Question

could you explain Vue template vs Vue function jsx, what is different of it ? which one is good for use ?
Ex :
I have two components :
Component1.vue
<template>
<div>
<p>{{message}}</p>
</div>
<template>
<script>
export default {
name:'Component1',
data(){
return{
message:'This is component1'
}
},
}
</script>
Component2.vue
export default {
name:'Component2',
data(){
return{
message:'This is component2'
}
},
render(){
return(<p>{this.message}</p>)
}
}
Could I write like component2.vue ? How about performance of both ?

Answer 1

Both versions of writing the component will do the same thing. As far as the performance is considered, there would be no difference. Both are compiled into render function that returns Virtual DOM tree for your component.
The difference is the flavor and syntax of the implementation. Though with Vue, we mostly use templates as they are more readable over JSX, there are situation where JSX is more appropriate to use. For example, consider the case where you are trying to design a dynamic header component where level prop decides which <h1...h6> tag to use:
<template>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</template>
Same thing can be written more elegantly using render function or JSX:
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name
this.$slots.default // array of children
)
},
props: {
level: {
type: Number,
required: true
}
}
});
Also, if you are using TypeScript, JSX syntax will provide you compile-time check for validating props and attributes, though setting that with Vue 2 is quite an hassle. With Vue 3, that is much simpler.
As far as dynamic loading of component is considered, you can use built-in <component /> component with is prop within the template as:
<component v-bind:is="someComponentToRenderDynamically"></component>
So, this brings the same advantages as JSX or direct render function based component. For more documentations see:
Dynamic Components
Render Function & JSX

Answer 2

First of all let's see what are Template syntax and JSX:
JSX: A syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Basically, JSX is a JavaScript render function that helps you insert your HTML right into your JavaScript code.
Template syntax: An HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data.
Using Vue templates is like using JSX in that they’re both created using JavaScript. The main difference is that Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
What does it mean?
JSX functions are never used in the actual HTML file, while Vue templates are.
What is the difference? which one is better to use ?
According to the Vue.js documentation, Vue compiles the templates into highly-optimized JavaScript code.
But if you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.
However, do note that they do not enjoy the same level of compile-time optimizations as templates.
So, we can conclude that writing template syntax with Vue is more optimized.

Answer 3

The vue template is much more readable and easier to understand than jsx functions.
It's much easier to save variables / properties and access them using "{{someVariables}}", rather than always telling a vue method to read them
In short, it's better to use the vue template because it's easier to implement dynamic pages with it (and other things).
Also, at this point it's not a very good idea to keep sending html code through methods.