vue-compiler-sfc主要是用来解析SFC组件,我们都知道,一个SFC(*.vue)文件三大要素是template、script、style,vue-compiler-sfc就是负责解析这三大要素。从源码src目录下,每个文件的命名大致就可以看出来各个文件的作用,我先从 compiler-sfc 的 index.ts 开始。 (最近看源码深有感触的是,官文只是
Vue 提供了@vue/compiler-sfc,专门用于 Vue 文件的预编译。下面我会一步一步演示@vue/compiler-sfc的使用方法。 解析Vue 文件 在进行处理之前,首先要读取到代码的字符串 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import{readFile,writeFile}from"fs-extra";constfile=awaitreadFile("./src/main.vue...
如果你的用例只需要给静态HTML添加一些简单的交互,你可以看看 petite-vue,它是一个6kB 左右、预优化过的 Vue 子集,更适合渐进式增强的需求。 SFC 是如何工作的 Vue SFC 是一个框架指定的文件格式,因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS,一个编译后的 SFC 是一个标准的 JavaScript(E...
由于上篇文章中分析完了也只分析了parse.ts文件,这是因为执行调用都不是同一个文件,是不同地方不同时刻调用不同方法的,所以并不能做到一次调试就能全部文件都分析完。所以这篇文章是用来确定后续分析目标的。 另外文章同步到我的网站了:Serene Syllables,喜欢代码高亮的可以去这里看: vue/compiler-sfc源码分析学习3...
compiler:CompilerDOM,也就是@vue/compiler-dom这个包,这个包我们以后再分析。 我们接着往下看。 入口判断缓存和整理数据 constsourceKey=source+sourceMap+filename+sourceRoot+pad+compiler.parseconstcache=sourceToSFC.get(sourceKey)if(cache){returncache}constdescriptor:SFCDescriptor={filename,source,template:null...
SFC 会在打包构建过程中,通过@vue/compiler-sfc编译为标准的 JavaScript 和 CSS。 开发阶段:标签会注入成原生的标签以支持热更新 生产环境:标签会被抽取、合并成单独的 CSS 文件 使用预处理器 需在语言块标签的 lang 属性中声明预处理器 script 使用 TypeScript ...
🎨组件作用域的 CSS 代码示例: 如何编译 Vue SFC? Vue 工程需要借助vue-loader或者rollup-plugin-vue来将 SFC 文件编译转化为可执行的 JS Vue 2 vue-loader 依赖: @vue/component-compiler-utils vue-style-loader Vue 3 vue-loader@next 依赖:
1. 确认defineExpose在[@vue/compiler-sfc]中的作用 defineExpose是Vue 3单文件组件(SFC)的一个编译时宏,用于显式声明组件对外暴露的props、自定义事件、组件的methods等。这样做有助于在<script setup>语法糖中更清晰地控制组件的暴露内容,特别是在使用TypeScript时,有助于类型推断和自动补全。 2. 解释为...
compiler-sfc: 检查模板引用的使用情况, compiler-sfc: 修复了默认重写的边界情况 keep-alive: 修复了 keep-alive 内存泄漏问题 keep-alive: 修复了内存泄漏问题,同时不影响过渡测试。 props: 不应解构作为原始引用的 props shallowReactive: 在 shallowReactive 中设置已经是响应式的值时应该跟踪该值。