阅读 83

浅析Vue两个构建版本的区别(现在主流vue是什么版本)

Vue 完整版 V.S. Vue 只包含运行时版

Vue 完整版

  • cdn 引入文件名:vue.js, vue.min.js(生产环境)

  • 同时包含编译器和运行时的版本

  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码

  • 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是出去编译器的其它一切。

Vue 只包含运行时版(非完整版)

  • cdn 引入文件名:vue.runtime.js, vue.runtime.min.js(生产环境)

  • 非完整版不含编译器

  • 体积相比完整版要小约 30%,所以应尽可能使用这个版本。

  • webpack 引入默认使用非完整版,使用完整版需要自行配置 alias

  • @vue/cli 引入默认使用非完整版。

深入理解两种区别

image.png

templaterender用法

如果需要在客户端编译模板,比如传入一个字符串给template选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板,就需要加上编译器,即使用完整版:

// 需要编译器 new Vue({     template: '<div>{{ hi }}</div>' }) 复制代码

当使用vue-loadervueify 的时候,*.vue文件内部的模板会在构建时预编译 JavaScript。所以在最终打好的包里不需要编译器,所以用非完整版即可。

// 不需要编译器 new Vue({     render (h) {         return h('div', this.hi)     } }) 复制代码

最佳实践总结

总是使用非完整版,然后配合vue-loader*.vue文件。

  1. 保证用户体验,用户下载的 JS 文件体积更小。视图写在render函数里用h来创建标签。(h函数是 Vue 中的 createElement 方法)。

  2. 保证开发体验,开发者可以直接在 vue 文件里写 HTML 标签,而不写 h函数。

  3. vue-loader会在构建时把 vue 文件里的 HTML 转为 h函数。

方便的用 CodeSandbox 写 Vue

  1. 进入:codesandbox

  2. 点击 Vue 图标

image.png

  1. 在线实时写 Vue 代码

  2. 导出 zip 文件

image.png


作者:qL
链接:https://juejin.cn/post/7028865103919317006


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐