加载vue文件步骤_vue中.vue文件解析步骤详解
這次給大家?guī)?lái)vue中.vue文件解析步驟詳解,vue中.vue文件解析的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。
我們平時(shí)寫的 .vue 文件稱為 SFC(Single File Components),本文介紹將 SFC 解析為 descriptor 這一過(guò)程在 vue 中是如何執(zhí)行的。
vue 提供了一個(gè) compiler.parseComponent(file, [options]) 方法,來(lái)將 .vue 文件解析成一個(gè) 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 方法用來(lái)對(duì)單文件組件進(jìn)行編譯。
接下來(lái)我們看看 parseComponent 方法都做了哪些事情。
parseComponent 方法function start(tag, attrs, unary, start, end,){
}
function end(tag, start, end){
}
parseHTML(content, {
start,
end
})
parseComponent 方法中定義了 start``end 兩個(gè)函數(shù),之后調(diào)用了 parseHTML 方法來(lái)對(duì) .vue 文件內(nèi)容踐行編譯。
那么這個(gè) parseHTML 方法是做啥的呢?
parseHTML 方法
該方法看名字就知道是一個(gè) html-parser,可以簡(jiǎn)單理解為,解析到每個(gè)起始標(biāo)簽時(shí),調(diào)用 option 中的 start;每個(gè)標(biāo)簽結(jié)束時(shí),調(diào)用 option 中的 end。
對(duì)應(yīng)到這里,就是分別調(diào)用 parseComponent 方法中定義的 start 和 end 函數(shù)。
在 parseComponent 中維護(hù)一個(gè) depth 變量,在 start 中將 depth++ ,在 end 中 depth-- 。那么,每個(gè) depth === 0 的標(biāo)簽就是我們需要獲取的信息,包含 template、script、style 以及一些自定義標(biāo)簽。
start
每當(dāng)遇到一個(gè)起始標(biāo)簽時(shí),執(zhí)行 start 函數(shù)。
1、記錄下 currentBlock。
每個(gè) currentBlock 包含以下內(nèi)容:declare type SFCBlock = {
type: string;
content: string;
start?: number;
end?: number;
lang?: string;
src?: string;
scoped?: boolean;
module?: string | boolean;
};
2、根據(jù) tag 名稱,將 currentBlock 對(duì)象在返回結(jié)果對(duì)象中。
返回結(jié)果對(duì)象定義為 sfc,如果tag不是 script,style,template 中的任一個(gè),就放在 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
每當(dāng)遇到一個(gè)結(jié)束標(biāo)簽時(shí),執(zhí)行 end 函數(shù)。
1、如果當(dāng)前是第一層標(biāo)簽(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 整個(gè)遍歷一遍后,得到的 sfc 對(duì)象即為我們需要的結(jié)果。
生成 .js ?
compiler.parseComponent(file, [options]) 得到的只是一個(gè)組件的 SFCDescriptor ,最終編譯成.js 文件是交給 vue-loader 等庫(kù)來(lái)做的。
相信看了本文案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章!
推薦閱讀:
vue webpack使用案例詳解
react配合antd組件做出后臺(tái)系統(tǒng)
Vue.js中.native修飾符使用詳解
總結(jié)
以上是生活随笔為你收集整理的加载vue文件步骤_vue中.vue文件解析步骤详解的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: autocad2014 第二次打开闪退_
- 下一篇: 卓越性能代码_「Win」被隐藏起来的卓越