preface

I haven’t written more in a long time these days, and recently I am addicted to CF, which delayed my writing time (I am really addicted to playing games), or I suggest you to arrange your game time reasonably (anyway, I can’t control it, hahaha).

Ha ha ha, of course interested partners add me WX, to the transport ship about oh, “northern region”.

Back to business.

Render function

Render function is an important core component rendering, it is the same as template development, but this form of development, it (render) is closer to the bottom, so that the Vue compile less conversion.

Let’s see where we can use the render function.

As we all know, the Vue project entry file main.js has a render function that looks like this: mount the project’s App root component to the root instance and render it.

new Vue({
  render: h= > h(App)
}).$mount('#app')
Copy the code

Let’s unpack the render function body.

  • Render returns a VNode -> “virtual node”

  • The argument to the render function is a createElement function

    • createElementThe return value is also oneVNodenode
    • createElementThe function takes three arguments
      • The first tag name
      • Second attribute value
      • The third tag child element

Code demo:

index.js

export default {
    data() {
        return {
            name: 'frogman'}},render(createElement) {
       	return createElement(
            "div", 
            { attrs: {title: "Frogman"} }, 
            [
                createElement("span".null."Frogman")])}}Copy the code

main.js

import config from "./index.js"
Vue.component("test", config)
Copy the code

So it’s going to call the tag and it’s going to create a div with a span child, and notice that the createElement second parameter attribute here, you can’t scribble here, you have to follow the official website style and click here.

The render function is not readable as template is not readable.

Divide the situation, sometimes use more flexible, let’s take the most typical case of the official website to give an example.

Encapsulate a component, pass in a numeric parameter, and display a label for the numeric parameter, as you would expect.

<template>
    <div>
        <h1 v-if="num == 1"></h1>
        <h2 v-if="num == 2"></h2>
        <h3 v-if="num == 3"></h3>
        <h4 v-if="num == 4"></h4>
        <h5 v-if="num == 5"></h5>
        <h6 v-if="num == 6"></h6>
    </div>
</template>
Copy the code

That’s fine, but the code is redundant, a bunch of judgments. Let’s look at the implementation of the render function again

<script>
  render: function (createElement) {
    return createElement(
      'h' + this.num,
    )
  },
  props: {
    num: {
      type: Number.required: true
    }
  }
</script>
Copy the code

Both of the above methods implement the same function, but the render method looks much cleaner. So generally wrapping things with render functions is more flexible, especially with configuration and template separation. In-depth understanding of configuration here.

What is the JSX

JSX is a combination of JavScript and XML format, which is an extended syntax for JavaScript. In plain English, you can use JSX in your JavaScript code. JavaScript first creates the virtual DOM when parsing JSX, and JSX is eventually compiled into JavaScript code for execution.

Why use JSX

Some people will find it awkward and unreadable to write with the render function if the children are nested in too many layers.

export default {
    render(createElement) {
       	return createElement(
            "div", 
            { attrs: {title: "Frogman"} }, 
            [
                createElement(
                    "span".null."Frogman"
                ),
                createElement(
                    "span".null, 
                    createElement(
                        "b".null."Front end entertainment."
                    )
                ),
                createElement(
                    "span".null, 
                    createElement(
                        "b".null, 
                        createElement(
                            "i".null."Focus on front end entertainment.")))])}}Copy the code

Like the one above, it’s nested in multiple layers, so it’s hard to read, and it takes a long time to figure it out.

To solve this problem, JSX comes in. JSX acts as the syntax sugar for createElement, which can be written directly in the render function using the template format.

Let’s use this form to restore what we wrote with createElement.

export default {
    render() {
        return (<div>
            <span>The upcoming</span>
            <span>
                <b>Front end entertainment</b>
            </span>
            <span>
                <b>
                    <i>Focus on front end entertainment</i>
                </b>
            </span>
        </div>)}}Copy the code

What are the differences between JSX and Render functions

There is no difference except in the way they are written, and the attributes follow the Vue document.

So let’s use JSX syntax and see how it works, because if you’ve ever played React here, you’ll probably use it.

export default {
	data() {
		return {
			name: "Front end entertainment.".dataList: {
				title: "Front end entertainment.".href: "www.baidu.com"}}},render() {
        return <div onClick={this.xxx} {.{attrs: this.dataList}} >{ this.name }</div>}}Copy the code

use

If your project isWebpackBuild, the case of babel@6

npm i @babel/core @vue/babel-preset-jsx babel-loader
Copy the code

Babelrc file in the root directory

{
	"plugins": ["transform-vue-jsx"]}Copy the code

webpack.config.js

{
    test: /\.js/,
    use: "babel-loader"
}
Copy the code

If your project isWebpackBuild, the case of babel@7

npm i @babel/core @vue/babel-preset-jsx babel-loader @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
Copy the code

Babelrc file in the root directory

Babel7 is compatible with JSX

{
	"presets": ["@vue/babel-preset-jsx"]}Copy the code

webpack.config.js

{
    test: /\.js/,
    use: "babel-loader"
}
Copy the code

If your project isVue-cli

The latest version of cli will support JSX syntax by default. If you have an older version, use the same configuration as above.

npm i @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
Copy the code

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset']}Copy the code

conclusion

Thanks for watching, any questions to find me ha, if there are want to transport ship about remember private chat with me oh, hey hey

Thank you

Thank you for reading this article. I hope it helps you. If you have any questions, please correct me.

✿ Theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus

Interested partners can join [front end entertainment circle exchange group] welcome everyone to exchange and discuss

Writing is not easy, “like” + “watching” + “retweet” thanks for supporting ❤

Phase to recommend

How to Use Decorators in Vue Projects

Share 15 useful Webpack plugins!!

How to write a Vue component and publish it to NPM

Sharing 12 Common Webpack Loaders

What are CommonJs and Es Modules and how they differ?

Do you know all these JavaScript Tricks for work?

【 Suggestions 】 Share some Git commands commonly used in work and how to solve special problems

reference

Blog.csdn.net/sansan_7957…

Cn.vuejs.org/v2/guide/re…