preface

In my last blog I talked about creating vue scaffolding optionsThe Runtime – the Compiler and Runtime – onlyThe difference betweenThis blog is about learning the function of render function in runtime-only vue scaffolding main.js.

import Vue from 'vue' import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el:  '#app', render: h => h(App) })Copy the code

The role of the render function in vue instances

The following code is used to create the template in main.js using run-time Compiler. I want to modify it to use the render function to illustrate how to use it.

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

Let’s start with the render function:

new Vue({
  el: '#app',
  render:function(createElement) {

  }
})
Copy the code

Inside the render function is a function called createElement (note: the official name is “H”, I’ll write createElement as a bit more intuitive, you can name it yourself).

1. How to use render function

The createElement function takes three arguments:

new Vue({ el: '#app', render:function(createElement) { // 1. CreateElement ('h2', {class:'box'},['Hello World']) return createElement('h2', {class:'box'},['Hello World'])}}Copy the code

Let’s take a look at the results:

It has a h2 tag, it has a class=box, and it says Hello World. Is it the same as what we did in createElement? The createElement content replaces the mounted #app content!

We can also try adding another button:

new Vue({ el: '#app', render: function (createElement) { // 1. CreateElement ('h2', {class: 'h2') return createElement('h2', {class: 'h2', 'h2') 'box'}, [' Hello World ', the createElement method (' button '[]' button ') / / add a button])}})Copy the code

H2 tag added a button button!

2. How do we display the incoming component object?

Directly on the code:

// Create a component const CPN = {template: '<div>{{message}}</div>', data(){return {message :' I am a component message'}}} new Vue({el: '#app', render: function (createElement) { // 1. // return createElement('h2', // {class: 'box'}, / / [' Hello World ', / / the createElement method (' button '[]' button ') / / add a button / / / / 2. Pass a component object: return createElement(CPN)}})Copy the code

Effect:

The createElement function takes a component object directly and renders the data to the page.

3. Will there be any effect if the App component is passed in?

Finally, we pass the App import App from ‘./App’ into the createElement function to see if it works.

Import Vue from 'Vue' import App from './App' vue.config. productionTip = false /* eslint-disable no-new */ / create a component // const cpn = { // template: '< div > {{message}} < / div >', / / data () {/ / return {/ / the message: 'I am components message / /}} / / /} new Vue ({el:' # app, render: function (createElement) { // 1. // return createElement('h2', // {class: 'box'}, / / [' Hello World ', / / the createElement method (' button '[]' button ') / / add a button / / / / 2. Pass a component object: return createElement(App)}})Copy the code

Effect:

You can show it, but there’s a problem. Let’s look at the code for app.vue:

Obviously there is a template, but why don’t we need the template and AST steps (see my Run-time Compiler and Run-time Only blog for the steps)? Because the template in the app. vue file is directly compiled as a normal object, the normal object is directly converted to the render function, so the App component in main.js does not have a template.

Import Vue from 'Vue' import App from './App' vue.config. productionTip = false Print App console.log(App);Copy the code

Effect:No more templatel, more render function! The render component is already compiled into the Render function!

So who handles the template in the.vue file?

Is compiled by vue-template-compiler, which parses the. Vue file template into the render function

The App component is printed as a render object parsed by vue-template-compiler (with an internal render function).

conclusion

The advantage of this is that you can directly omit the template and AST steps and compile directly with the render function, which improves efficiency.

(See my Run-time Compiler vs. Run-time Only blog for details on how Vue applications run.)