Vue 2源碼解析Parse函數(shù)定義
Parse 函數(shù)
在 baseCompile() 執(zhí)行過程中,首先就是通過 parse方法 解析 template模板字符串,生成對應(yīng)的 AST 抽象語法樹。
整個 parse函數(shù) 定義太長,這里省略幾個內(nèi)部方法
/**
* Convert HTML string to AST.
*/
export function parse(template: string, options: CompilerOptions): ASTElement {
warn = options.warn || baseWarn
platformIsPreTag = options.isPreTag || no
platformMustUseProp = options.mustUseProp || no
platformGetTagNamespace = options.getTagNamespace || no
const isReservedTag = options.isReservedTag || no
maybeComponent = (el: ASTElement) =>
!!(
el.component ||
el.attrsMap[':is'] ||
el.attrsMap['v-bind:is'] ||
!(el.attrsMap.is ? isReservedTag(el.attrsMap.is) : isReservedTag(el.tag))
)
transforms = pluckModuleFunction(options.modules, 'transformNode')
preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
delimiters = options.delimiters
const stack: any[] = []
const preserveWhitespace = options.preserveWhitespace !== false
const whitespaceOption = options.whitespace
let root
let currentParent
let inVPre = false
let inPre = false
let warned = false
function warnOnce(msg, range) {
}
function closeElement(element) {
}
function trimEndingWhitespace(el) {
}
function checkRootConstraints(el) {
}
parseHTML(template, {
warn,
expectHTML: options.expectHTML,
isUnaryTag: options.isUnaryTag,
canBeLeftOpenTag: options.canBeLeftOpenTag,
shouldDecodeNewlines: options.shouldDecodeNewlines,
shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
shouldKeepComment: options.comments,
outputSourceRange: options.outputSourceRange,
start(tag, attrs, unary, start, end) {
},
end(tag, start, end) {},
chars(text: string, start?: number, end?: number) {
},
comment(text: string, start, end) {
}
})
return root
}在 parse() 函數(shù)中,首先會定義以下方法:
定義 warn 警告函數(shù),用于在控制臺顯示錯誤提示
獲取 options 中的幾個標簽判斷函數(shù),并定義一個 Vue 組件的判斷方法 maybeComponent:通過判斷當(dāng)前節(jié)點的 ast 對象的幾個屬性,來確實是不是一個組件
之后定義標簽的處理方法(都是方法數(shù)組)
- transforms :包含 modules 配置中的兩個處理方法,分別處理標簽的 class 和 style
- preTransforms:專門用來處理 input 的動態(tài)綁定,比如
<input v-model="data[type]" :type="type" /> - postTransforms:這個在 web 端的模板編譯是沒有配置的,這里是一個空數(shù)組
stack:用來保存標簽解析的一個棧,保證標簽的匹配
定義 delimiters 分隔符和其他的一些標志變量。
trimEndingWhitespace:刪除傳入 el 節(jié)點的尾隨空格節(jié)點,這里會判斷當(dāng)前解析的標簽不在 pre 標簽內(nèi)部
closeElement:處理節(jié)點的 if,else-if,else 等情況下的條件,并更新 inVPre,inPre 的狀態(tài)
checkRootConstraints:檢查組件根節(jié)點,警告不能使用 slot 或者 template 作為組件根節(jié)點,也不能在根節(jié)點使用 v-for 循環(huán)
最后,定義核心的解析方法 parseHTML
這里面的大部分變量和方法都是閉包形式,會在整個解析過程中保持狀態(tài)
parseHTML
parseHTML 就負責(zé)解析 template 字符串,生成 ast 對象,并通過閉包的方式將結(jié)果保存到 parse 函數(shù)定義的 root 變量。
函數(shù)接收 template 字符串 與 解析配置 options 兩個參數(shù),并且 options 需要包含以下四個方法:
start:用來解析標簽的開始部分(匹配到標簽開始部分時調(diào)用)
end:用來解析結(jié)束標簽(匹配到標簽結(jié)束部分時調(diào)用)
**chars **:文本處理,解析到文本部分時調(diào)用
comment:注釋處理,用來解析注釋部分,在碰到注釋時調(diào)用
以上就是Vue 2源碼解析Parse函數(shù)定義的詳細內(nèi)容,更多關(guān)于Vue Parse函數(shù)定義的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式
這篇文章主要介紹了el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
antd form表單使用setFildesValue 賦值失效的解決
這篇文章主要介紹了antd form表單使用setFildesValue 賦值失效的解決方案,具有很好的參考價值,希望對大家有所幫助。2023-04-04
el-tree設(shè)置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法
el-tree默認有較淺的背景色,這里業(yè)務(wù)需要,選中節(jié)點的字體高亮,更改顏色,下面這篇文章主要給大家介紹了關(guān)于el-tree選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的設(shè)置方法,需要的朋友可以參考下2022-12-12
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07

