Vue 2源碼解析Parse函數(shù)定義
Parse 函數(shù)
在 baseCompile() 執(zhí)行過程中,首先就是通過 parse方法 解析 template模板字符串,生成對應的 AST 抽象語法樹。
整個 parse函數(shù) 定義太長,這里省略幾個內部方法
/** * 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:通過判斷當前節(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é)點,這里會判斷當前解析的標簽不在 pre 標簽內部
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 就負責解析 template 字符串,生成 ast 對象,并通過閉包的方式將結果保存到 parse 函數(shù)定義的 root 變量。
函數(shù)接收 template 字符串 與 解析配置 options 兩個參數(shù),并且 options 需要包含以下四個方法:
start:用來解析標簽的開始部分(匹配到標簽開始部分時調用)
end:用來解析結束標簽(匹配到標簽結束部分時調用)
**chars **:文本處理,解析到文本部分時調用
comment:注釋處理,用來解析注釋部分,在碰到注釋時調用
以上就是Vue 2源碼解析Parse函數(shù)定義的詳細內容,更多關于Vue Parse函數(shù)定義的資料請關注腳本之家其它相關文章!
相關文章
el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式
這篇文章主要介紹了el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04antd form表單使用setFildesValue 賦值失效的解決
這篇文章主要介紹了antd form表單使用setFildesValue 賦值失效的解決方案,具有很好的參考價值,希望對大家有所幫助。2023-04-04el-tree設置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法
el-tree默認有較淺的背景色,這里業(yè)務需要,選中節(jié)點的字體高亮,更改顏色,下面這篇文章主要給大家介紹了關于el-tree選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的設置方法,需要的朋友可以參考下2022-12-12使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07