Vue模板语法template VS Vue渲染函数render

一，vue模板语法（template）

一个template模板，从vue实例化到展示到页面上，会经过怎样的过程呢，我们来分析一下。

如下示例:

new Vue({
    el:'#app',
    template:'<h3>hello world</h3>'
})

就离不开vue模板语法解释器vue-template-compiler，vue-template-compiler有什么作用呢？

主要是将模板（template）编译成虚拟dom渲染函数（render）。

主要有三个步骤：

1，parser：模板解释器，将template模板转成AST(abstract syntac tree)抽象语法树。

2，optimizer：AST优化器，处理静态不参与重复渲染的模板片段。

3，codegen：代码生成器，基于AST生成JavaScript虚拟dom渲染函数，延迟到运行时执行，生成HTML。

二，vue渲染函数（render）

vue渲染函数从vue实例化到展示到页面上过程要比使用vue模板简单的多，因为渲染函数执行的结果是直接生成了虚拟dom对象。

如下示例：

new Vue({
el:'#app'，
render:h=>h('h3','hello wrold')
})

使用vue渲染函数不需要经过模板解析，AST优化，代码生成三个步骤，所以使用vue的渲染函数要比使用vue模板语法性能高的多。

 

参考：

vue template compiler模版解析模块源码解析

https://blog.csdn.net/u014787301/article/details/85842963

理解vue-loader

https://www.cnblogs.com/Sherlock09/p/11023593.html