欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 2源碼解析Parse函數(shù)定義

 更新時間:2022年08月15日 14:56:59   作者:MiyueFE  
這篇文章主要為大家介紹了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ù)方式

    這篇文章主要介紹了el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • antd form表單使用setFildesValue 賦值失效的解決

    antd form表單使用setFildesValue 賦值失效的解決

    這篇文章主要介紹了antd form表單使用setFildesValue 賦值失效的解決方案,具有很好的參考價值,希望對大家有所幫助。
    2023-04-04
  • vue項目部署自動清除緩存方式

    vue項目部署自動清除緩存方式

    這篇文章主要介紹了vue項目部署自動清除緩存方式,包括清除文件緩存,清除瀏覽器 localStorage 緩存方式,本文結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-07-07
  • el-tree設置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法

    el-tree設置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法

    el-tree默認有較淺的背景色,這里業(yè)務需要,選中節(jié)點的字體高亮,更改顏色,下面這篇文章主要給大家介紹了關于el-tree選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的設置方法,需要的朋友可以參考下
    2022-12-12
  • Vue3中實現(xiàn)div拖拽功能

    Vue3中實現(xiàn)div拖拽功能

    這篇文章主要介紹了Vue3中實現(xiàn)div拖拽功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03
  • vue中插槽(slot)幾種類型的使用方法

    vue中插槽(slot)幾種類型的使用方法

    本文主要介紹了vue中插槽(slot)幾種類型的使用方法,主要分三種,默認插槽,具名插槽,作用域插槽,下面就來一起介紹一下,感興趣的可以了解一下
    2024-03-03
  • Vue.js系列之項目搭建(1)

    Vue.js系列之項目搭建(1)

    今天要講講Vue2.0了。最近將公司App3.0用vue2.0構建了一個web版,因為是第一次使用vue,而且一開始使用的時候2.0出來一個月不到,很多坑都是自己去踩的,現(xiàn)在項目要上線了,所以記錄一些過程
    2017-01-01
  • vue如何在線預覽各類型文件

    vue如何在線預覽各類型文件

    這篇文章主要介紹了vue如何在線預覽各類型文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 使用el-checkbox-group選中后值為true和false遇到的坑

    使用el-checkbox-group選中后值為true和false遇到的坑

    這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 基于Vue3編寫一個簡單的播放器

    基于Vue3編寫一個簡單的播放器

    這篇文章主要為大家詳細介紹了如何基于Vue3編寫一個簡單的播放器,文中的示例代碼講解詳細,對我們學習Vue3有一定的幫助,需要的可以參考一下
    2023-03-03

最新評論