【vue】 runtime-compiler和runtime-only的区别

我们在利用脚手架创建项目时，在一个环节中会让我们选择runtime-compiler或runtime-only，这两者到底有什么区别呢？

一、两者的比较

1.下面我们来创建两个项目，分别选中runtime-compiler和runtime-only:

项目一：

项目二：

2.我们先来查看这两个项目main.js文件的差别：

首先我们先看看vue实例是如何使用App这个模块的：

• runtime-compiler:使用components属性注册App组件，在template属性是使用App组件。
• runtime-only:直接使用render属性调用h()函数使用App组件。

runtime-only没有使用template属性，且当项目的vue实例中出现template，则运行会出错。

3.我们看看Vue实例中template属性运行过程：

上面很明显能看出runtime-compiler和runtime-only的执行区别：

• runtime-compiler需从第一步运行到最后一步。
• runtime-only则直接从第三步的render()开始执行。

1.性能上：明显runtime-only少了解析以及编译步骤，runtime-only性能更高。
2.项目代码量：由于runtime-only不用解析以及编译，则生成项目时就少了处理template的源码，则runtime-only的项目代码量更少。

二、render()函数讲解

1. render()函数的介绍

在Vue中，我们使用模板HTML来组建页面，使用render()我们就可以在逻辑行为中使用JS来构建DOM。

Vue的核心技术使用了虚拟DOM，所以在项目中的template模板是需要解析编译成虚拟DOM的，而转化为虚拟DOM的过程就需要用到render()函数。

当使用render()描述虚拟DOM时，Vue提供一个函数，这个函数就是构建虚拟DOM所需要的工具，官网上给它起了个名字createElement(),但通常简写为h()。

例如上面使用runtime-only创建的项目：

new Vue({
   
  el: "#app",
  render: h => h(App)
});

先来看看官网对createElement()的介绍：

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数，必要参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
   
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。