Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

What is the render function in Vue2?

There is no such thing in vue.js that we normally write, but when we use scaffolding to write code, there is this code in main.js

New Vue ({el: "# app", render: h = > h (app)}) / / can also have a second writing new Vue ({render: h = > h (app)}). $mount (' # app)Copy the code

This is what it looked like when scaffolding was not used before:

 new Vue({
     el:"#app",
     template:`<App></App>`,
     components:{App}
 })
Copy the code

So why is there this render, and where are all the previous templates

In main.js, we’ll import the vUE first, and then we’ll import the App component, so the question is in the vue we’re importing, is this really the vue we know, it’s not, we can click on that vue, It jumps to node_modules, and you’ll see that the vUE you’re using is actually part of the VUE

This part of the vUE does not contain the template module, so when we use template we will get an error, so why not use the full VUE

explain

If we use this module, when we use Webpack, we have already parsed out the files and turned them into native HTML, and this module is no longer useful, so we don’t need this module. Use render to show the same effect

Render () principle

New Vue({el:"#app", render: h => h(app), // function (createElement){ return createElement('<h1>','hello,i am badspider! Render: (createElement) => createElement('<h1>','hello, I am badspider! Render: h => h(App)})Copy the code