浅析Vue完整版与运行时版(非完整版)两者的差别

138 阅读2分钟

前言:想跳过繁文缛节,可以直接翻到最底下总结:

官网解释

点此进入Vue.js官网 进入【起步】后查看文档列表的【安装】这项可以找到描述如下: image.png 这里主要区分完整版与运行时版,生产环境是做了代码转译压缩的。

完整版名称一般结尾为——/vue.js 或 /vue.min.js

运行时版(非完整版)——/vue.runtime.js 或 /vue.runtime.min.js

官网提供了几种不同的安装方法,一般的话可以直接通过bootcdn官网里面搜索Vue

image.png 可以看到对应的不同版本信息,这里按照2.x版本的最新版2.6.9进行引用,引用的方法就是点击按钮复制到剪切板,到项目中粘贴 image.png 新手用的话看到这么多版本就犯难了,究竟该用哪个?差别是什么?

使用一个在线编辑器codesandbox ,点击新增选择vue的图标,就可以创建一个vue实例

image.png

为了看出两者的差别,现在主要改动下方两个文件:

image.png

index.html里面引入完整版的js,另外一个改动是只在div里面写入占位符号{{n}}

image.png

mian.js里面把预置的全部注释掉,写入下方代码,实现页面占位符替换

image.png

另外如果index.html的div删除占位符,那么main.js应该这样修改

image.png

只有完整版可以实现——解释:只要是html变成页面中的东西,完整版都支持

————— —————— - 分割线 - ——————— ——————————

如果我们把index.html里面的script引用换成非完整版的,这个去掉了编译器,体积更小。

页面中的内容是无法显示的,因为没有编译器读取页面中的代码内容,能拿到new Vue()但是页面内容获取不到,html页面可以不需要写主要内容,而是使用render(h){},h是作者预置的,可以是任意名字。

这就是文档里的说法,非完整版没有编译器,占用体积小。

image.png

image.png

总结:

image.png