template与render都是渲染函数，都要经过编译，其最终作用都是为了生成虚拟节点VNode。

template还要经过render编译

按编译方式区分：

• template是按html的方式做渲染；
• render是按js的方式做渲染；

vue-template-compiler

template经过vue-template-compiler编译生成组件由render再次编译最后生成VNode。

runtime-only模式与runtime-compiler模式

在构建项目的时候有这两种模式可选，区别是如果runtime-only比runtime-compiler少了一个compiler的过程，因此构建速度较快，生成的文件也相对较小。
但这样也引出了一个问题，如果使用的是runtime-only模式在创建Vue实例的时候使用template函数会报错：

You are using the runtime-only build of Vue where the template compiler is not available

可以在vue.config.js文件中通过配置来修改：

runtimeCompiler: true

渲染过程

12665637-38455c745c7ce5e9.png

Vue实例

// template函数语法
new Vue({
    components: {App},
    template: '<App/>'
})
// render函数语法
new Vue({
    components: {App},
    render: h => h(App)
})