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专门设置了一个库去解析它。

猜你喜欢

转载自blog.csdn.net/laya1211/article/details/126780043
今日推荐