Vue2.X的深入学习--关于H函数的说明

vue项目中。写在.vue文件的template里的代码需要借助webpack的模板解析器插件才能解析。单个.html文件引入vue文件时,该vue文件顺便把模板解析器引入进来了(缺点是体积大)。

所以我们使用工程化开发项目时候,需要在package.json文件引入vue-template-compile,用于进行模板解析648546D7-1C49-3E2F-AC7A-02CEBE807464.png如果没有模板解析器,就解析不了,但是vue-template-compile只能解析.vue文件里的模板,没办法解析.js文件里的模板:

所以当我们这么写的时候会解析不了

41848BC4-45E7-9091-3460-306EF7878F22.png

25EEE9C9-DC30-D3BF-5872-EC27B73A022D.png

为什么解析不了?因为main.js文件引入的vue文件没有带模板解析器

D1158802-8A83-033D-97EC-02DFB6401F91.png

044BAE7A-636C-3591-2D8F-A0365570AB57.png

vue.runtime.common.js是不带模板解析器的.vue文件,vue.js是带模板解析器的vue文件

F8AFC921-45D6-E202-53C5-9069EE225C19.png

如果我们在main.js引入带有模板解析器的vue.js文件,则可以解析template

FF48C45D-FF63-7639-DD92-9240C3A544B5.png

3BAFBFDE-4162-9EDD-68CD-09A6F946038B.png

为什么默认引入的是不带模板解析器的vue.js文件?

因为体积问题:

2A5EF12A-AE06-7892-1788-AA9E9F890E26.png

解决方案,

使用官方提供的render函数。他能够通过h函数去调用引入的vue-template-compile,也就是第九行代码↓相当于第十一行和第十二行加上loader模板解析器。

205EEBD3-0AC8-BFD8-D883-598DCB1DE12F.png

总结:

EFC0EFF0-3419-0B92-3E32-CE2BEC4A19EC.png

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的