Vue中main.js里的render是干什么的

以下是我在学习Vue时，对main.js中render函数的个人理解，可供初级小白参考，大神可以直接请了，哈哈哈

好，进入正题

在打开利用Vue脚手架创建的项目文件main.js之前，我们猜想它应该长这样

实际上的mian.js如下

 

跟我们想的不一样，那这里的render又是什么呢？

我们可以先假设，如果按照我们猜想的写法，会发生什么？

报错了 ，意料之中

 

 

那么我们来分析一下错误提示

错误提示我们引入的是非完整版的Vue，缺少模板解析器，并给出了两种解决方法

我们先来试试第二种方法，引入完整版的Vue，我们怎么知道引入的是不是完整版的？完整版的又在哪呢？

看代码

实际上我们引入的是vue.runtime.esm.js，是精简版的Vue，它与完整版的不同就是少了模板解析器，那完整版的Vue哪里呢？

 

引入完整版的Vue我们只要改一行代码就行

import Vue from 'vue/dist/vue'

 运行成功！第二种方法可行

接下来我们再来试一下第一种办法，使用非完整版的Vue，把render函数写上去

  同样运行成功

 

此时我们发现，这不就是Vue一开始采用的解决方法吗？

从vue官网中知道，vue提供了两个版本，完整版和只包含运行时版，差别是完整版包含编译器，就是将template模板编译成AST，再转化为render函数的过程，而运行时版不包含模板解析器，因此必须提供render函数。总而言之就是为了确保页面能正常渲染。

那么问题来了，既然有完整版，为什么不直接用？为什么要用不包含模板解析器的版本？

因为，没必要。

当我们的项目编写完成，经过webpack打包之后，模板解析器就没有用了，我们没必要再留着它，所以一开始引入不包含模板解析器的版本即可。

举个例子，就像你要铺瓷砖，你需要瓷砖和工人，工作完成之后，得到的是铺好的瓷砖，此时工人就没必要再留在你家了。这里的工人就相当于模板解析器，我们没必要把工人也买回家对不对？

对于这个render函数一般只会在main.js中使用，在一些组件中都不会去使用，因为组件中写得都是template标签，vue专门设置了一个库去解析它。