完整版
-
是同时包含编译器和运行时的版本,CDN引入所对应的文件名为vue.js或vue.min.js(生产环境)。
该版本有编译器,占用代码体积,所以比runtime版大40%的体积。
使用该版本,可直接将内容写在HTML中查看视图效果,或用template 渲染到 HTML,用webpack引入,需要配置alias,@vue/cli 引入也需要额外配置。
new Vue({
template: '<div>{{ hi }}</div>'
})
runtime版本
-
是只包含运行时的版本,没有编译器,CDN引入所对应的文件名为vue.runtime.js或vue.runtime.min.js。
因该版本无编译器,故占用代码体积小,但无法直接实现页面渲染,需要利用 render 里的 h 函数来创建 HTML 节点,vue.js的webpack引入和@vue/cli 引入都默认使用此版本。
new Vue({
render (h) {
return h('div', this.hi)
}
})
在实际开发中,由于h函数的参数比较复杂,可以使用vue-loader把vue文件里的HTML转为h函数。
如将vue.js错引用为vue.runtime.js,则无法将HTML编译为视图;如将vue.runtime.js错引用为vue.js,代码体积会变大,具体大家可以使用Codesandbox.io实践一下。
如何用 codesandbox.io 写 Vue 代码
codesandbox.io是一个在线编辑器,能够快速创建项目。
注意:不要登录,否则只能创建50个项目
点击中间按钮,创建项目。
选中vue开始编辑即可。