Vue template vs Vue jsx

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 :

1. Component1.vue

<template>
  <div>
     <p>{{message}}</p>
  </div>
<template>
<script>
  export default {
     name:'Component1',
     data(){
      return{
        message:'This is component1'
      }
     },
  }
</script>

2. 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 ?

Aldine

BTW if you use Meteor, there may not be any out of the box build package for Vue JSX. – Kcal

Yes I'm base on Meteor and Vue. How can I do? – Aldine

Either write the build package, or setup a prebuild step... If you are not highly experienced, I would highly recommend sticking with the normal template syntax. – Kcal

But I want to try it. Could you share your experience? – Aldine

That would be extremely long. Start by learning from the source code of the existing build packages. – Kcal

Could you share the source code of the existing for learning? – Aldine

See the akryum:vue-component build package: github.com/meteor-vue/vue-meteor/tree/master/packages/… – Kcal

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

Sussi

thank for your reply. I want to track speed of Vue template and render function or JSX , when it's compile to DOM. Could I check complie-time? How can I check ? – Aldine

@RoeurbNavy It is actually pointless to do so. The performance in any case would literally be the same no matter what you use as it is all Virtual DOM in the end. – Sussi

@HarshalPatil could you elaborate a bit on this? "if you are using TypeScript, JSX syntax will provide you compile-time check for validating props and attributes". In what way does that NOT work without JSX? Could you point towards some research or docs please? – Tyree

@Julisch, you can safely ignore that part now in 2023. The earlier versions of TypeScript and Vue.js did not support type checking inside the SFC - *.vue files. But that is no longer the case. It works without any special magic. – Sussi

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.

Illuminati

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.

Signification

Organizm thank for your reply.On my real components is dynamic to render , so when I use template , difficult to check condition on template. So I want to use jsx because jsx write on script and It's easy to check condition before render. Do you have any solution for dynamic render ? – Aldine

There is not really a solution for that since they both do the same thing, the vue templates are designed to have a more ordered code and to be able to separate the functions and methods from the code that will be rendered. – Signification

Oh, by the way, a good idea to understand it might be to think about what a large component using the render function would look like, it's better to know where your code will be rendered than know what will be rendered in your code. – Signification

How about performance ? I want to track time of render function speed. Could I check it? – Aldine

Again, there is not really a difference in these kinds of things, they are just different procedures. Now, if you want to have more control and monitoring over your vue project, you should use its official browser extension, VueDevTools. – Signification