An article explaining in detail how to use JSX in vue3

How to use JSX in

vue? The following article will introduce to you how to use JSX in vue3. I hope it will be helpful to you!

In most cases, Vue recommends using template <template></template> syntax to create applications.

In Vue 3 project development, template is the default writing method of Vue 3. Although the template looks like HTML, Vue actually parses the template into a render function. After that, the virtual DOM is returned through the render function when the component is running. [Learning video sharing: vue video tutorial, web front-end video]

However, in some usage scenarios, we really need to use JavaScript’s complete programming capabilities . At this time Rendering function comes in handy.

h function

Vue provides a h() function for creating vnodes virtual dom. The following example: How to use

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

in components?

Previously when the composite API was used with templates, the return value of the setup() hook was used to expose data to the template. But when using h(), the setup() hook returns the rendering function:

import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // 返回渲染函数
    return () => h('div', props.msg + count.value)
  }
}

The handwritten h function can be Handle more dynamic scenes. But if it is a complex scene, the h function is very cumbersome to write, and you need to convert all attributes into objects yourself. And when components are nested, the objects will become very complex. However, because the h function also returns virtual DOM, is there a more convenient way to write the h function? The answer is yes, the way is JSX.

JSX

JSX is an XML-like extension of JavaScript. With it, we can create vnodes in a simple way:

const vnode = <div id="app">hello</div>

This The syntax for writing HTML in JavaScript is called JSX, which is an extension of JavaScript syntax. When the above code is run directly in the JavaScript environment, an error will be reported. The essence of JSX is syntactic sugar for the following code.

const vnode = createVnode('div',{id:"app"}, 'hello')

In fact, createVnode is also called inside the h function to return the virtual DOM.

So, how to use JSX in Vue project?

By default, vue3 vite projects do not support jsx. If you want to support jsx, you need to install the plug-in @vitejs/plugin-vue-jsx

Installation

npm i @vitejs/plugin-vue-jsx -D

Configure in vite.config.js:

import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx

export default defineConfig({
  plugins: [
    vue(), 
    vueJsx()
  ],
});

Then you can use it in the Vue component:

// render.vue
<script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(100);
    return () => <div>count is: {count.value}</div>;
  },
};
</script>

Note: lang in the script must be changed to jsx.

Or a jsx file:

// render.jsx
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <div>jsx文件</div>
  }
})

Template vs JSX

How should we choose JSX and template?

Advantages of template: The syntax of template is fixed, only v-if, v-for and so on. We write according to this fixed format syntax, so that Vue3 can easily optimize static tags at the compilation level and reduce the Diff process. For example, static promotion, type tags, tree structure balancing, etc. can improve virtual DOM runtime performance. This is also an important reason why Vue 3's virtual DOM is faster than Vue 2.

Reference: Vue rendering mechanism

Advantages of JSX: template cannot support more dynamic needs like JSX due to syntax limitations. . This is also an advantage of JSX compared to templates.

JSX has another advantage over template in that it can return multiple components in one file.

How to choose?

When realizing business needs, give priority to using templates and make full use of Vue's own performance optimization. Components with higher dynamic requirements can be implemented using JSX. (For example, later, I will use JSX to implement the dynamic form generator)

Summary

First of all, we usually use template templates to create applications in projects, template templates Will be compiled into render rendering function during the build phase. The rendering function is a function used to return the virtual DOM.

Then we can actually skip this step and directly use the h function to generate virtual DOM.

The internal execution of the h function is actually the createVNode function to generate the virtual DOM. However, since the h function is difficult to write, we use JSX to write it more conveniently and quickly. The createVNode function is actually used internally in JSX.

JSX cannot be executed directly in JavaScript. In the vite project, we need to install the plug-in @vitejs/plugin-vue-jsx

and configure it accordingly Only then.

Finally, the advantages and disadvantages of template and JSX are compared. The advantage of template is that its syntax is fixed and easy to write. At the compilation level, Vue3 has made a lot of optimizations for template compilation. The advantage of JSX is flexibility. In some cases with high dynamic requirements, JSX has become the standard configuration.

As the saying goes, there are specialties in the art industry. No one is more powerful than the other in template and JSX. They each have their own advantages and disadvantages in different scenarios. They are both powerful programming tools when used properly.

(End)

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of An article explaining in detail how to use JSX in vue3. For more information, please follow other related articles on the PHP Chinese website!