vue 脚手架 main.js中的render函数

 要点：

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

 曾经我们写main.js是这样写的 

那我们先把之前的写法写入脚手架的main.js

但运行发现报错

报错：你真正运行一个运行时版本的vue没有模板解析器

通俗的话就是你运行了一个阉割版的vue,一个残缺的vue,你运行的vue不全,没有模板解析器

其实就是这代码出现的问题

 解决方法

办法1.引用一个完整版的vue

不引入组件还是报错

寻找原因：去找vue文件夹,我们这边写的引用是vue,也就是直接引用地址为vue文件夹

 此时我们再看文件说明配置 package.json

 里面有一个module属性,其实当你用es6进入vue文件夹,就默认引入的是,vue.runtime,esm.js文件

而这个文件就是一个残缺版的vue,残缺了模板解析器当少了模板解析器你template对象就没人帮你解析了

验证：去dist文件夹里面找,这么的js中,只有vue.js才是原汁原味的vue,其他都是它的改变或者删减版

 

然后在vue.runtime.esm.js里面写console.log进行验证是否运行了这个js文件

发现666输出,证明了确实引用的是一个残缺版的vue

 

所以

解决办法（1）引用一个完整版的vue

引入一个完整版的vue

发现不报错了 

但是有个问题,那为什么vue要默认引用一个残缺版的vue呢？？

 解决办法（2）就引用一个残缺版的vue

如果正常写的话,就是会报错,因为没有模板解析器.在template里写的标签就解析不了就报错

 

 然后这边就要用到render函数了

办法2.把预编译对象放入render函数

我们这边先不写成render函数的精简形式

render是一个函数,并且要有返回值,不然vue会报错

 

随便返回一个null,

 

就不报错,而且还发现这样写就vue帮你调用了render了

 

并且render函数还可以传入参数

验证：render函数还可以传入参数
传入a并看a是什么属性

发现是一个函数

 

官方一般把a写成createElement

而这个函数里第一个写标签类型,第二写标签内容,并且用return对它进行输出

 

运行发现页面显示了

 

 为什么要引出render呢,其实就是它考虑到你引用的是一个残缺的vue.js,一个不会解析template项的vue.js

 

 然后对该render函数简化

因为render函数里,没有this所以可以写成箭头函数

 然后只有一个参数就可以把括号省略了

由于函数中只有一个return,就可以写成下面形式

 

然后因为createElement太长了,把它换成q

这边之所以括号里面是两参数，是因为是h1是html中的内置元素,这个元素里,要写,元素的内容所以得传两个参数

对应app组件直接写入就行,因为app里面就是对应得内容,它是在vm上的

但是不能在App上加‘’！！！！！！！！！

 

如果加了''就表示,在html上创建一个html中的App标签元素,但是html中没有App标签所以会报错

 错误写法

 不加引号就读变量了 读到了上面引用的App

运行网页成功

 

 但是为什么vue团队要进行创建好多个vue呢

 因为vue里面有两个东西

一个为核心,即周期、处理事件等等都在里面

另一个为模板解析器,就是template解析模板,其中它占了vue体积的三分之一

粉丝框为核心,橙色框为解析器

当程序员打包的时候,webpack,把vue文件转化成浏览器可以识别的类型html css js 等,但是此时这个模板解析就很多余,因为webpack就能实现转化,在打包时,就不需要模板解析了,这样就可以让打包出来的文件小一点

验证：

我们看文件的大小,发现,只要带了runtime,就是运行时的vue都比vue.js要小,因为它们都没有模板解析器,esm 其实就是es6 +module es6模块化，也就是如果你创建项目是按照,es6模块化引入的则,就会使用到这个js文件

虽然觉得,只是想,减少几百kb的容量,增设了一个render函数,有点小题大做但是通过下面一个例子

买工人就相当于用了vue的完整版,具有模板解析器,而雇佣工人就像使用了render函数,使用的是残缺的vue,但是打包后,工人就消失了,不会像,第一种一样,铺好之后但是工人还需要养

 其实这边使用了render函数,引用了一个残缺的vue作用

1.减少了打包的文件大小2.使打包文件不会出现没有用处的模板解析器

注：

会发组件文件中,会出现template标签,而这边vue为它专门找了一个库 ,这边的vue-template-compiler 使专门编译标签的上的template的,js里的template对象是无法解析的

总结：

 

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