【Vue】完整版 VS 非完整版

【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文件。
• 思路：
  1. 保证用户体验，用户下载的JS文件体积更小，但支持h函数
  2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数。
  3. 脏活让loader做，vue-loader把vue文件里的HTML转为h函数。

---

五、引用出错的后果

• vue.js错用成vue.rentime.js

  无法将HTML编译成视图

• vue.runtime.js错用成vue.js

  代码体积变大而已，因为vue.js有编译HTML的功能

更多详情信息