当template内部的结构代码在编译的时候发生了什么？

比如我们下面的代码
<template>
 <div>
     <h1>123456789</h1>
 </div>
</template>

我们平常写template里面所使用的模板是HTML语法组件的页面，其实在vue中都会被编译为render函数，因为vue中采用的是虚拟dom进行页面组件，这样的优点是优化页面的加载重绘性能

render函数的基本使用

我们在views文件夹中新建一个Render.vue组件，注意如果要使用render函数编译模板，一定不要有<template></template>，否则就回加载template中的内容

render.vue

<script>
    export default {
        render(createElement){
            return createElement('h1',{},123456789)
        }
    }
</script>

<style lang="scss" scoped>
</style>

App.vue

<template>
    <div>
        <render></render>
    </div>
</template>
<script>
import render from "./views/render.vue"
    export default {
        components:{
            render
        }
    }
</script>
<style lang="less" scoped>
</style>

我们设置一个小案例，通过render函数动态的修改当前组件的节点渲染

<script>
    export default {
        props:{
            tag:{
                type:String,
                required:true,
            },
            data:{
                type:String
            }
        },
        render(createElement){
            return createElement(this.tag,{},this.data)
        }
    }
</script>

<style lang="scss" scoped>
</style>

main.js

/*
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from ‘vue’
//引入App组件，它是所有组件的父组件
import App from ‘./App.vue’
//关闭vue的生产提示
Vue.config.productionTip = false

/*
关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

*/

//创建Vue实例对象—vm
new Vue({
el:’#app’,
//render函数完成了这个功能：将App组件放入容器中
render: h => h(App),
// render:q=> q(‘h1′,’你好啊’)

// template:`<h1>你好啊</h1>`,
// components:{App},

})