這次給大家帶來vue中.vue文件解析步驟詳解，vue中.vue文件解析的注意事項有哪些，下面就是實戰案例，一起來看一下。

我們平時寫的 .vue 文件稱為 SFC(Single File Components)，本文介紹將 SFC 解析為 descriptor 這一過程在 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 等庫來做的。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

vue webpack使用案例詳解

react配合antd組件做出后臺系統

Vue.js中.native修飾符使用詳解

總結

以上是生活随笔為你收集整理的加载vue文件步骤_vue中.vue文件解析步骤详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。