美文网首页
vue的runtime版本和带有compiler的版本

vue的runtime版本和带有compiler的版本

作者: 海豚先生的博客 | 来源:发表于2020-03-17 14:43 被阅读0次
vue-comp.png

组件渲染到页面的过程

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

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

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

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

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

相关文章

网友评论

      本文标题:vue的runtime版本和带有compiler的版本

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