vue3 -- @vue/compiler-sfc 单文件转换工具

@vue/compiler-sfc

"version": "3.2.37"

SFC是vue中重要的一环,也是vue3中对于静态节点进行缓存提升的重要位置

SFC -- single file Component 单文件组件,以 .vue 进行结尾,这个文件浏览器也不会识别,最终也是要被转换成js代码

SFC中包含三块,template、script、style等三块代码,分别表示模版、脚本、样式三块

@vue/compiler-sfc的作用就是把单文件组件编译成为js代码

parse

下面就看一看具体的使用

新建一个Foo.vue组件

组件同时包括templatescriptstyle三块

新建一个nodejs脚本

用fs读取到文件的内容后,使用parse解析, 最终会返回一个对象

setup脚本改造foo.vue

setup语法编译后的结果

唯一的不同就是编译后的结果从原来的script上迁移到scriptSetup

compileTemplate

拿到之前parse后的结果后,需要对template进行进一步的转换,把template结果进一步编译成对应的js vnode函数

其中code的值就是最终模版编译的结果

我们把结果单独拿出来看下

最终返回了一个render函数,这里也就符合预期,vue组件中如果使用js的方式写,可以写一个render函数去渲染组件

compilerScript

根据parsed的结果来解析脚本部分,compileScript接收2个参数,第一个就是之前parse的结果, 然后再传入相应的option

编译后的结果,content就是最终编译出的代码

content格式化之后的结果, 所以说setup只是语法糖,最终还是以defineComponent去包裹一个对象进行返回的形式

compileStyle

compileStyle 即解析SFC style模块的入口函数

由于sfc中style块是可以写多个的,所以parse最终的结果styles其实是个数组

由变量签名也可以看出

这里我们取第一个块打印出来看一下,实际情况下应该是去循环的

编译结果

其中code即是最终的css结果

参考链接


vue3 -- @vue/compiler-sfc 单文件转换工具 -- 学习笔记

发布者

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注