runtime-compiler和runtime-only的区别

3月

本文最后更新于2020年03月24日，已经过了1703天没有更新，若内容或图片失效，请留言反馈

在了解它们的区别之前，我们先来了解vue程序的运行过程

请输入图片描述

1.当我们将template（模板）传递给vue时，vue会将其保存在options中
2.将template模板解析（parse）成抽象语法树（ast）
3.将抽象语法树（ast）编译（compile）成render函数
4.通过render函数会根据template模板将其生成为虚拟DOM的节点，最终组成虚拟DOM树（virtual dom）
5.将虚拟DOM渲染为真实DOM

template --> ast --> render --> virtual dom --> ui(真实DOM)

runtime-compiler和runtime-only的区别

在下面的图片中左边的是使用runtime-compiler创建的，右边的是使用runtime-only创建的项目
请输入图片描述

runtime-compiler运行流程：

template --> ast --> render --> virtual dom --> ui(真实DOM)

runtime-only运行流程：

render --> virtual dom --> ui(真实DOM)

runtime-only

　　我们在使用runtime-only的时候，需要借助webpack的loader工具，将.vue文件编译为
javascript，因为是在编译阶段做的，所以他只包含运行时的vue.js代码，所以代码体积会更轻量

runtime-compiler

　　在vue中，最终渲染都是通过render函数，如果写template属性，则会编译为render函数，那么这个编译过程会在运行时发生，所以需要带有编译器的版本
　　编译过程会对性能有一定的损耗

runtime-only：将template在打包的时候，就已经编译为render函数

runtime-compiler：在运行的时候才去编译template

结果：

发布生产的时候，runtime-only构建的项目代码体积更小，运行速度更快
推荐使用runtime-only函数

render函数

vue在使用模板创建页面的时候，需要先通过一个渲染函数来创建虚拟dom树，这个函数就是render函数。render函数内部有一个回调函数createElement(),这个函数的作用就是生成一个 VNode节点（虚拟dom），render 函数得到createElement() 创建的 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。