美文网首页饥人谷技术博客
Vue完整版与runtime版本的区别

Vue完整版与runtime版本的区别

作者: 浪味仙儿啊 | 来源:发表于2020-02-02 21:51 被阅读0次

完整版

  • 是同时包含编译器和运行时的版本,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。


    runtime版

    因该版本无编译器,故占用代码体积小,但无法直接实现页面渲染,需要利用 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是一个在线编辑器,能够快速创建项目。

codesandbox.io主页
注意:不要登录,否则只能创建50个项目

点击中间按钮,创建项目。


image.png

选中vue开始编辑即可。


vue

相关文章

  • 浅析Vue 版本区别

    Vue 版本区别 1. 版本文件名 完整版 vue.js 只包含运行时版 vue.runtime.js 2...

  • Vue完整版与runtime版本的区别

    完整版 是同时包含编译器和运行时的版本,CDN引入所对应的文件名为vue.js或vue.min.js(生产环境)。...

  • 2021-11-20 vue笔记

    笔记 脚手架文件结构 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区别:vue.js...

  • Vue完整版与非完整版

    本文主要介绍Vue完整版与非完整版的区别与优缺点: :总是使用非完整版,然后配合vue-loader和vue文件 ...

  • vue完整版和非完整版的区别和用法

    1.vue完整版和非完整版的区别 2、Vue完整版与非完整版的一些优劣: 完整版 优点:逻辑清晰简单,好写好用。 ...

  • vue全解:1.安装

    介绍一下 Vue 两个版本的区别和使用方法: 1.两个版本对应的文件名 主要区别: 完整版有compiler,编译...

  • vue渲染运行模式

    vue有两种运行版本:Compiler 版本、Runtime 版本。默认是Runtime 版本。 一. Runti...

  • 视频笔记拷贝

    尚硅谷vue视频笔记 脚手架文件结构 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区...

  • 分析脚手架

    main.js,该文件是整个项目的入口文件 关于不同版本的Vue:1.Vue.js与Vue.runtime.xxx...

  • Vue完整版和非完整版的区别

    在使用Vue的时候,分为两个版本,一个是完整版(vue.js),另一个是非完整版也叫运行时版本(vue.runti...

网友评论

    本文标题:Vue完整版与runtime版本的区别

    本文链接:https://www.haomeiwen.com/subject/fpxcxhtx.html