vue中.vue文件解析的示例分析-创新互联
这篇文章将为大家详细讲解有关vue中.vue文件解析的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
vue 提供了一个 compiler.parseComponent(file, [options]) 方法，来将 .vue 文件解析成一个 descriptor：
// an object format describing a single-file component.
declare type SFCDescriptor = {
template: ?SFCBlock;
script: ?SFCBlock;
styles: Array;
customBlocks: Array;
}; 文件入口
解析 sfc 文件的入口在 src/sfc/parser.js 中，该文件 export 了 parseComponent 方法， parseComponent 方法用来对单文件组件进行编译。
接下来我们看看 parseComponent 方法都做了哪些事情。
parseComponent 方法
function start(tag, attrs, unary, start, end,){
}
function end(tag, start, end){
}
parseHTML(content, {
start,
end
})parseComponent 方法中定义了 start``end 两个函数，之后调用了 parseHTML 方法来对 .vue 文件内容践行编译。
那么这个 parseHTML 方法是做啥的呢？
parseHTML 方法
该方法看名字就知道是一个 html-parser，可以简单理解为，解析到每个起始标签时，调用 option 中的 start；每个标签结束时，调用 option 中的 end。
对应到这里，就是分别调用 parseComponent 方法中定义的 start 和 end 函数。
在 parseComponent 中维护一个 depth 变量，在 start 中将 depth++ ，在 end 中 depth-- 。那么，每个 depth === 0 的标签就是我们需要获取的信息，包含 template、script、style 以及一些自定义标签。
start
每当遇到一个起始标签时，执行 start 函数。
1、记录下 currentBlock。
每个 currentBlock 包含以下内容：
declare type SFCBlock = {
type: string;
content: string;
start?: number;
end?: number;
lang?: string;
src?: string;
scoped?: boolean;
module?: string | boolean;
};2、根据 tag 名称，将 currentBlock 对象在返回结果对象中。
返回结果对象定义为 sfc，如果tag不是 script,style,template 中的任一个，就放在 sfc.customBlocks 中。如果是style，就放在 sfc.styles 中。script 和 template 则直接放在 sfc 下。
if (isSpecialTag(tag)) {
checkAttrs(currentBlock, attrs)
if (tag === 'style') {
sfc.styles.push(currentBlock)
} else {
sfc[tag] = currentBlock
}
} else { // custom blocks
sfc.customBlocks.push(currentBlock)
}end
每当遇到一个结束标签时，执行 end 函数。
1、如果当前是第一层标签(depth === 1)，并且 currentBlock 变量存在，那么取出这部分text，放在 currentBlock.content 中。
if (depth === 1 && currentBlock) {
currentBlock.end = start
let text = deindent(content.slice(currentBlock.start, currentBlock.end))
// pad content so that linters and pre-processors can output correct
// line numbers in errors and warnings
if (currentBlock.type !== 'template' && options.pad) {
text = padContent(currentBlock, options.pad) + text
}
currentBlock.content = text
currentBlock = null
}2、depth-- 。
得到 descriptor
在将 .vue 整个遍历一遍后，得到的 sfc 对象即为我们需要的结果。
生成 .js ？
compiler.parseComponent(file, [options]) 得到的只是一个组件的 SFCDescriptor ，最终编译成.js 文件是交给 vue-loader 等库来做的。
关于“vue中.vue文件解析的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前文章：vue中.vue文件解析的示例分析-创新互联
文章地址：http://ybzwz.com/article/jcogh.html
