Understanding render in Vue scaffolding

In the vue scaffolding, we can see that in the new Vue code in the entry file main.js there is a code render: h=>h(App);

This code is not like the code we usually use when using vue. I will write the general Vue code

	import Acomponent from "../Acomponent"
	vm = new Vue({
		el:"#app"
		data(){
			return {
				a:"aaa",
				b:"bbb"
			}
		},
		template:`<div>
			<span>this is a test</span>
			<Acomponent></Acomponent>
		</div>`,
		components:{
			Acomponent
		}
	})

The above code is the code we can understand normally. There is a template, and other components can be introduced in the template. But why is there a render method in the scaffolding?

According to our own ideas, we can change the scaffolding code to see

Start the scaffolding, npm run serve and check the result. An error is reported. The information is as follows

So, we can say that the Vue introduced by the scaffolding is a Vue without a template parser. If you want to parse the template, you need to use the render function to help you go to the node_modules folder of the project to see which Vue we have introduced.

import Vue from 'vue' 

We open the vue/dist file and see a lot of files, as shown in the figure

The error message says that we have two ways to solve it, one is to introduce the complete vue.js and the other is to use render.
Let's import the full version and see if it can solve the problem.

Let's look at the second one, introducing Vue without a template parser, using render,
Let's talk about a render first
Render is a function with one parameter, which is used to create a node.

Through console.log, we can see that the parameter createElement is also a function, which creates a VNode object

Next we use arrow functions to simplify render

	render(createElement){
		return createElement("h1","123");
	}
	//Use arrow functions to simplify render:(createElement)=>{return createElement("h1","123")}
	// There is only one parameter in the arrow function, so you don't need to write parentheses. If there is only one line in the method body, you don't need to write curly braces, and you don't need to write return for the return value.
	//So the above code can be simplified to this render:createElemnet=>crementElement("h1","123")
	//Similarly, createElement is originally customized, we can also change the name render: h=>h("h1","123")
	//This is very similar to the code in the scaffolding. In the h function, if it is a native HTML tag, it is written like this. If it is a Vue component, it can be passed directly. All we have is render:h=>h(App)

This is how render is written

Let's talk about why the scaffolding introduces an incomplete Vue for use. We know that after the Vue code is completed, it needs to be packaged, and the core code of Vue is indispensable. After we package it, we don't need to parse the template again. Then, the template parser in the core code of Vue is not needed at all. Therefore, in order to reduce the size of the code, Vue removed the template parser, but when we develop, we need to use it again, so we create a render method to parse the template.
In short, its purpose is to make the packaged code as small as possible.

This is the end of this article about understanding render in Vue scaffolding. For more relevant Vue render understanding content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!