【Vue】深入了解Vue完整版与非完整版
目录
术语
完整版Vue
非完整版Vue
深入理解两个版本的区别
引用出错的结果
一、术语
编译器:用来将模板字符串编译成为JavaScript渲染函数的代码
运行时:用来创建Vue实例、渲染并处理虚拟DOM等的代码。基本就是除去编译器的其他一切。
二、完整版
-
完整版体积大(假设它占比100K),功能强,有编译器。
-
vue.js
包含注释信息,全部的代码
vue.min.js
不包含注释信息,只是代码
三、非完整版
-
非完整版体积小(相比于完整版为70K),功能弱,没有编译器。
-
vue.runtime.js
包含注释信息,全部的代码
vue.runtime.min.js
不包含注释信息,只是代码
四、深入理解两个版本的区别
Vue完整版 | Vue非完整版 | 评价 | |
---|---|---|---|
特点 | 有compiler | 没有compiler | compiler占40%体积 |
视图 | 写在HTML里,或者卸载template选项里 | 写在render函数里用h来创建标签 | h是vue作者(尤雨溪)写好传给render的 |
cdn引入 | vue.js | vue.runtime.js | 文件不同,生产环境后缀为.min.js |
webpack引入 | 需要配置alias | 默认使用此版 | 尤雨溪配置 |
@vue/cli | 需要额外配置 | 默认使用此版 | 尤雨溪、蒋豪群配置 |
最佳实践:总是使用非完整版,然后配合vue-loader和vue文件。
思路:
- 保证用户体验,用户下载的JS文件体积更小,但支持h函数
- 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数。
- 脏活让loader做,vue-loader把vue文件里的HTML转为h函数。
五、引用出错的后果
vue.js错用成vue.rentime.js
无法将HTML编译成视图
vue.runtime.js错用成vue.js
代码体积变大而已,因为vue.js有编译HTML的功能