Vue:浅析vue.js完整版 和 vue.runtime.js运行时版

Vue:浅析vue.js完整版 和 vue.runtime.js运行时版

技术杂谈小彩虹2021-08-15 21:08:42220A+A-

不同构建版本

UMD CommonJS ES Module (基于构建工具使用) ES Module (直接用于浏览器)
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
完整版 (生产环境) vue.min.js - - vue.esm.browser.min.js
只包含运行时版 (生产环境) vue.runtime.min.js - - -

注:

  • 完整版:同时包含编译器和运行时的版本。
  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  • 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

完整版 vue.js

index.html引入

image-20210607154344300.png

main.js

image-20210607153507423.png

本地预览

image-20210607153713921.png

只包含运行时版 vue.runtime.js

index.html引入

image-20210607154516646.png

main.js

image-20210607154531345.png

本地预览

image-20210607154447983.png

window.Vue还是可以打印出来,但0却不在了,因为runtime版本不支持从HTML里获取视图

就算写在template中也不支持

image-20210607155040343.png

但使用template在完整版里是支持的

image-20210607155720716.png

根据官方文档可得知,如果在客户端编译模板(比如传入一个字符串给template选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:

// 需要编译器  // 完整版
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器  // 运行时版本
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

index.htmldiv里的{{n}}删掉,在main.jsrender

image-20210607160007634.png

image-20210607160037163.png

实现+1功能

new Vue({
  el: '#app',
  render(createElement){
    const h = createElement
    return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
  },
  data:{
    n:0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

68.4.1.gif

Vue实例

Vue实例官方文档

使用Vue实例的三种方法:

方法一:

完整版Vue,从CDN引用vue.jsvue.min.js即可做到,也可以通过import引用vue.jsvue.min.js

方法二:

运行时版本vue.runtime.js

方法三:

写(完整版),用户下载(运行时版本)

可以通过webpack,使用vue-loader*.vue文件翻译成h构建方法,但这样做HTML就只有一个div#app,SEO不友好

总的来说,运行时版本使用vue-loadervueify*.vue文件内部的模板会在构建时预编译成JavaScript。在最终打包好的包里是不需要编译器的,所以只用运行时版本即可。相较而言,运行时版本的体积比完整版要小大约30%。

写一个vue

image-20210607164001865.png

使用

main.jsimport Demo,指定渲染到#app,即index.html

image-20210607164407901.png

打印出Demo如下:

image-20210607164728419.png

可以知道Demo是个对象,而且有render,相当于上面使用vue.runtime.js时,使用的那个render,这里自动用vue.loaderDemo.vue里的template翻译为script中所需要的render

打印出Demo.render.toString(),证实了这个说法。

image-20210607165120253.png

这个Demo就是vue单文件组件

SEO友好

上面说到,方法三对SEO不友好,那么SEO是什么呢?

SEO就是搜索引擎优化

可以认为搜索引擎根据curl结果猜测页面内容,如果页面都是用JS创建div,那么就很难检测出信息。

titledescriptionkeywordh1a写好即可,原则是能够让curl得到页面的信息,SEO就能正常工作。

Google可以获取JS创建的内容。

深入理解两种区别

Vue完整版 Vue非完整版 评价
特点 有compiler 无compiler compiler占40%体积
视图 写在HTML里或者写在template选项 写在render函数里用h来创建标签 h是作者写好传给render的
cdn引入 vue.js vue.runtime.js 文件名不同,生成环境后缀为.min.js
webpack引入 需要配置 alias 默认使用此版 作者配置
@vue/cli引入 需要额外配置 默认使用此版 作者配置

最佳实践:使用非完整版,然后配合vue-loadervue文件

思路:

  1. 保证用户体验,用户下载的JS文件体积更小,但只支持h函数
  2. 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
  3. 使用vue-loader把vue文件里的HTML转为h函数

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们