The understanding of the render function in Vue and the reason why the simple version of vue.runtime.xxx is used for scaffolding

Vue2 scaffolding introduces a concise version of vue.runtime.xxx.js, so the render function is needed to parse the template

1. The difference between vue.js and vue.runtime.xxx.js:

    1. vue.js is a full version of Vue, including: core functions + template parser.

    2. vue.runtime.xxx.js is the running version of Vue, which only includes: core functions; no template parser.

2. Because vue.runtime.xxx.js does not have a template parser, the template configuration item cannot be used, and the createElement function received by the render function needs to be used to specify the specific content.

• Introduce complete Vue.js to write like this

    // 完整版Vue才能这么写
    template:`<h1>你好啊</h1>`,
    components:{App},

• what is the reason

Reason: The template parser accounts for one-third of the capacity of Vue.js. Finally, webpack is used for packaging and uploading, and webpack has translated .Vue into .js. It works (that is, one day we finally finish writing the code and convert the template into the purest document. At this time, there is no need for the template parser to exist), packaging can save some space, so we need to use render to parse the template

    // 当你使用残缺版的Vue时，还想创建元素，用下面的这个
    render(creatElement) { // 参数是一个函数
         console.log(typeof creatElement); // function
         // <h1>你好啊</h1>   下面加引号，是因为 h1 是html内置元素
         return creatElement('h1', '你好啊')
     }

• abbreviation

    // * 简写
    render:q=> q('h1','你好啊')