码迷,mamicode.com
首页 > 其他好文 > 详细

Vue的runtime版和compiler版

时间:2020-07-26 15:51:09      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:and   http   需要   font   time   编译器   pack   字符串   cli   

技术图片

 

组件渲染到页面的过程

template --> ast --> render --> vDom --> 真实的Dom --> 页面
ast:抽象语法树
vDom:虚拟Dom
template最终还是会被渲染为 render函数

Runtime Only (只包含运行时的版本)

1、指定render函数,如上图
2、通常借助webpack的loader工具,将 .vue 文件编译为JavaScript,进行了预编译。所以该版本只包含运行时的 Vue.js 代码
3、webpack打包时已经将template编译为render函数,不需要在客户端进行编译
4、template 会通过 vue-template-compiler 转换为 render 函数

  • 是只包含运行时的版本,没有编译器,CDN引入所对应的文件名为vue.runtime.js或vue.runtime.min.js。
  • 因该版本无编译器,故占用代码体积小,但无法直接实现页面渲染,需要利用 render 里的 h 函数来创建 HTML 节点,vue.js的webpack引入和@vue/cli 引入都默认使用此版本。

runtime-compiler(包含编译器和运行时的版本)

编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
1、有指定template,如上图
2、如果没有对代码做预编译,但又使用了 Vue 的 template 属性并传入一个字符串,需要在客户端编译模板
3、打包时不进行编译,在运行的时候,才去编译 template
4、体积较大

  • CDN引入所对应的文件名为vue.js或vue.min.js(生产环境),就是runtime-compiler版。
  • 该版本有编译器,占用代码体积,所以比runtime版大40%的体积。
  • 使用该版本,可直接将内容写在HTML中查看视图效果,或用template 渲染到 HTML,用webpack引入,需要配置alias,@vue/cli 引入也需要额外配置。
 

 

在实际开发中,由于h函数的参数比较复杂,可以使用vue-loader把vue文件里的HTML转为h函数。

如将vue.js错引用为vue.runtime.js,则无法将HTML编译为视图;如将vue.runtime.js错引用为vue.js,代码体积会变大,具体大家可以使用Codesandbox.io实践一下。



注:转载链接1 和 转载链接2

Vue的runtime版和compiler版

标签:and   http   需要   font   time   编译器   pack   字符串   cli   

原文地址:https://www.cnblogs.com/shababy/p/13379726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!