6 Vue渲染页面 html模版、template模版、render渲染函数

Vue渲染页面可使用html模版、template模版、render渲染函数；渲染过程的底层原理：模版[string形式] -> 编译 -> ast语法树 ->数据绑定 -> render函数 -> VNode/虚拟dom -> 真实的html；直接使用render渲染函数，跑起来速度是最快的，所以Vue项目开发过程中推荐使用render函数；

1、html模版：

{{name}}

;//页面中可进行数据绑定的html代码，这些模版也是合法的HTML，经过Vue系统最终转换为真实的html，其就可被浏览器和HTML解析器解析；

2、template模版：其直接使用有很大的局限性，往往配合组件使用；

(1).其会直接覆盖掉html模版；(2).其只能有一个根节点，不能出现兄弟节点；(3).当有多个同类名的HTML元素，template只能覆盖掉第一个元素[本质：选择器使用的querySelector();只能选择首个元素，(3)有些牵强]；

区别于template标签：其的使用不会占用“代码结构”，减少代码冗余，注意区分于template模版，两者的聚焦点不同；

3、render渲染函数：

(1).render函数的第一种使用方法：

(2).render函数的第二种使用方法：

(3).render函数的第三种使用方法：