Vue编译的过程,主要是翻译的过程,是为了把客户端(浏览器)无法识别的.vue翻译成客户端可识别的.html、.js、.css这些语言。在开发Vue的过程中,我们可以通过template字符串的形式或者render函数的形式渲染模板,这样的话只需要引入完整版的vue即可,因为还是.html文件。但是对于SFC浏览器还是无法识别,即使引入了完整版的带编译器的vue版本。
SFC
定义
Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,是一个框架(Vue)指定的文件格式。
注意:使用 SFC 必须使用构建工具,因为构建工具可以预编译模板,避免运行时的编译开销 => 引入runtime版本的Vue,将Compiler部分放在构建工具中完成,就可以减少引入的Vue包的体积,runtime版本的vue比完整版的vue少了Compiler部分。
SFC 是如何工作的
官方解释: Vue SFC 是一个框架指定的文件格式,因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS,即虚拟DOM的形式。
翻译一下:
@vue/compiler-sfc是Vue完整版中负责compiler的部分,可以将SFC编译成JavaScript。可以单独引入这个包来开发plugin等工具,像vue-loader、rollup-plugin-vue,vite这些工具也是使用了它。
再次证明,使用构建工具开发,只需要引入runtime版本的vue,因为Compiler部分放在了构建工具中,这样就可以减少项目体积。