vue h function and jsx configuration

The “render” function is the core building part of the Vue component. It accepts a parameter named createElement, which is used to programmatically create the component’s virtual DOM tree and describe the component’s view structure.

The “h()” function is an important tool for the “render” function. It is used to create virtual DOM nodes and add them to the virtual DOM tree.

Actually, the “h()” function is a utility for creating VNode (virtual node). It is also often called createVNode(), but due to its frequent use and simplicity, it is usually called” h()”. Overall, both functions play a crucial role in creating and rendering Vue components

Understand the h function

Vue recommends using templates to create your HTML in most cases. Then in some special scenarios, you really need the full programming capabilities of JavaScript. At this time, you can use the rendering function, which is better than Templates are closer to the compiler

Changes in VNode and VDOM:

Before Vue generates the real DOM, it will convert our nodes into VNodes, and the VNodes are combined to form a tree structure, which is the virtual DOM (VDOM);

In fact, the HTML in the template we wrote before ultimately uses the rendering function to generate the corresponding VNode;

Then, if you want to make full use of JavaScript programming capabilities, we can write the createVNode function ourselves to generate the corresponding VNode;

Use h() function:

  • h() function is a function used to create vnode;
  • In fact, the more accurate name is createVNode() function, but for simplicity, it is simplified to h() function in Vue

h() function How to use it?

How to use h() function? It accepts three parameters:

Precautions:

  • If there are no props, you can usually pass children in as the second parameter;
  • If there is ambiguity, you can pass null as the second parameter and children as the third parameter;
For example
<script>
import {h}from "vue"
export default {
render(){
    return h("h2",{class:"title"},"hello")
}
}
</script>
<style>
</style>

Counter case
<script>
import {h} from "vue";

export default {
  data() {
    return {
      counter: 0
    }
  },
  render() {
    //[] represents internal descendants
    return h('div', {class: 'app'}, [
      h('h2', null, `Current count: ${this.counter}`),
      h('button', {
        onClick: () => this.counter + +
      }, ' + 1'),
      h('button', {
        onClick: () => this.counter--
      }, '-1')
    ])
  }
}
</script>

<style scoped>
</style>

Usage of function components and slots

hello.vue
<script>
import {h, ref} from "vue";
import HelloWorld from "./HelloWorld.vue";

export default {
  render() {
    return h(HelloWorld, null, {
      default: props => h('span', null, `hello content passed to HelloWorld component: ${props.name}`)
    })
  }
}
</script>

<style scoped>
</style>
HelloWorld.vue
<script>
import {h} from "vue";

export default {
  render() {
    return h('div', null, [
      h('h2', null, 'Hello World!'),
      this.$slots.default ? this.$slots.default({name: 'zep'}) : h('span', null, 'I am the default value of hellowrold slot')
    ])
  }
}
</script>

<style scoped>

</style>

jsx babel configuration

Essence: It is converted into an h function through the relevant Babel, but the readability is much stronger

If we want to use jsx in our project, then we need to add support for jsx:

  • We usually convert jsx through Babel (jsx written in React is converted through babel);
  • For Vue, we only need to configure the corresponding plug-in in Babel;

This eliminates the need for poorly readable writing methods like the h function

For example: 

<script lang="jsx">
export default {
  render() {
    return <div>Hello, World!</div>;
  }
}
</script>

<style>

</style>

Note: When the version is lower, you need to download the relevant Babel and perform related configurations:

Installation of related Babel and loader
npm install vue-loader babel-loader -D

npm install @babel/preset-env @vue/babel-preset-jsx -D
Configuration of webpack.config.js file
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      }
    ]
  }
}
Configuration of Babel.config.js file
module.exports={
    presets:[
        "@babel/preset-env",
    ],
    plugins:[
        "@vue/babel-plugin-jsx"
    ]
}

The article has been included in the official knowledge archive Vue entry skill treeRendering function & amp;JSXrender function 39824 people are learning the system

syntaxbug.com © 2021 All Rights Reserved.