vue的模板template本质

谈谈vue的模板
Vue中模板template的本质是渲染函数的语法糖，它描述了界面的渲染过程，最终产生表达界面结构的虚拟节点。

渲染过程
首先这个模板是一个语法糖，渲染函数的语法糖，就可以直接去掉，我可以直接写渲染函数，vue的组件就是一个对象，不管是vue2还是vue3，渲染函数写哪呢 vue2直接写 render() vue3就写在setup里返回一个函数，
渲染函数（jsx）：
用来描述整个渲染的过程，产生最终的节点是一个或者多个虚拟节点。
可以通过创建虚拟节点，可以使用一个函数 import h from “vue”
渲染一个ul h(‘ul’,{class:‘list’})
最终把这个虚拟节点返回出去，就代表了整个页面的结构
渲染一百个节点，就可以通过for 循环。
把整个渲染的过程，用template 代替了， v-for ，所以说模板template的本质上是一渲染函数的语法糖。
把template 转换成render函数转换的过程就是模板编译。
模板编译
他编译的时间点不一样，产生的效率就不同
编译的时间
运行时的编译
代码执行的时候，在浏览器运行的过程中，运行在浏览器中的vue代码 把模板template变成一个渲染函数
在一个html 中直接引入CDN new一个vue出来，这种情况是 运行时编译，对它进行转换，会损失一些效率，
每个模板都要变成一个render函数，当然会损耗一些效率。
预编译
打包时的编译
无论是用vue/cli 搭建还是vite搭建都是一个工程化的环境，一定会涉及到打包，打包的时候已经把template转换成render函数，他不是在浏览器中转换的，而是在node环境中进行转换，等它真正运行到浏览器中，它就已经没有模板了，就是一个纯粹的render函数了，这在运行中，就节省了一些效率，它没有编译过程了，这就是为什么在工程化环境里面，开发vue它的执行效率要高于传统的工程，它有模板预编译，它省掉了在运行时态的编译过程。这就是模板的本质。所以在真正运行vue的代码的时候，像这些指令啊，什么判断啊全部都不存在了，全都是普普通通的代码，理解了这些在模板中写了些什么。最终会产生一些怎么的结果，在开发一些复杂的功能，或者是一些模板里面的bug的时候，才可以有迹可循，就对vue的单文件组件有了更加深入的理解，甚至觉得也可以不使用单文件组件了，用一个纯粹的js代码，改一个后缀js，就可以渲染了，导入main.js中界面上没有任何问题，不再受限于单文件组件了，脱离了单文件组件，扔然可以流畅的书写代码