怎么理解Vue中render函数预编译带来的好处

Vue文件从运行到有视图不是肯定会需要先编译的吗？什么是预编译？假设没有render函数预编译的功能，视图的渲染应该是什么样的过程。浏览器有对Vue模板文件编译功能吗？求大佬解释一下这个概念。最好有个比较的例子，不预编译渲染的过程是什么样子的，有预编译渲染的过程又是什么样子的。

没有render函数，vue会帮执行（模板编译-解析模板AST-AST生成代码-即生成render函数）执行过程

不是的，不要被图中的没有render函数迷惑了。没有render函数是值没有显示的声明render函数。

Vue创建组件模板的方式有很多种：

1）字符串
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
 
2）模板字面量
Vue.component('my-component', {
  template: `<div>A custom component!</div>`
})
 
3）x-template
Vue.component('my-component', {
  template: '#checkbox-template'
})
 
<script type="text/x-template" id="checkbox-template"> 
   <div>A custom component!</div> 
</script>
 
4）render 函数
Vue.component('my-component', {
  render(createElement){
      return createElement('div','A custom component!')
  }
})
 
5）内联模板(inline-template 属性)
<component v-bind:is="currentTabComponent"
               inline-template>
      <div>我是内联模板</div>
    </component>
 
6）单文件组件(.vue 文件)
<template>
</template>
<script>
</script>
<style>
</style>
 等等。。。。

除了第四种：render 函数，其余的最终都会解析成render 函数形式，在解析成虚拟DOM

render 函数可以理解成模板的底层写法。相对来说更复杂一点。