vue源碼閱讀第三篇，渲染代碼塊生成

時間 2020-06-15

標籤 vue 源碼閱讀第三渲染代碼生成简体版

原文原文鏈接

1. 構造compiler

我的以爲本章能夠大概看看我寫的內容最有效的方法是查看測試用例很詳細覆蓋很全面這一段比較繞，主要是包裝compile，最終暴露出compile自己以及包裝後的compileToFunctionsjavascript

1.1 compiler和compileToFunctions的基礎baseCompile

它是對src/compiler包下暴露出的核心parse進行初步包裝，咱們知道parse傳入template，返回的是ast語法樹，此時生成的render，staticRenderFns是一個代碼塊字符串，能夠用做外部使用的方法體html

function baseCompile ( template: string, options: CompilerOptions ): CompiledResult {
  const ast = parse(template.trim(), options)         // 前一篇講的parse，輸出ast樹
  if (options.optimize !== false) {                   // 若是須要進行優化，執行優化器，把ast樹入參進行優化
    optimize(ast, options)                            // 優化過程
  }
  const code = generate(ast, options)                 // 渲染相關的code生成核心，也是咱們這篇文章要講的重點，此時生成的render，staticRenderFns是一個代碼塊字符串，能夠用做外部使用的方法體
  return {
    ast,
    render: code.render,                              // 生成的渲染代碼塊 通常做爲方法體使用 with(){}相關
    staticRenderFns: code.staticRenderFns             // 靜態相關渲染函數
  }
}

複製代碼

1.2 包裝baseCompile成compile，編譯器的功能入口

執行createCompilerCreator生成器，在baseCompile的基礎上包裝compile，返回的render是字符串代碼塊，入參baseCompile，處理baseOptions相關數據vue

/** * 1. copy一份baseOptons，finalOptions = baseOptions，這邊咱們提一下初始時候的directives，v-text， v-model，v-html * 2. 定義errors和tips集合，在編譯過程當中調用options.warn方法時收集，根據報錯level選擇壓入tips或者errors * 3. 按策略合併finalOptions和options * 4. 調用baseCompile，返回編譯結果 * 5. 最後對各屬性的表達式進行正確性校驗，遞歸檢測全部節點，在編譯模板過程當中側重的是檢查name的合法性，這邊是統一檢查value的合法性 * (1). type = 1的節點，普通el節點，帶有屬性指令列表等， * (2). 指令匹配，檢查for循環中的表達式正確性， 例如v-for="'item' in list" v-for="continue in list"，經過這種形式來檢測值的合法性new Function(`var ${ident}=_`) * (3). 通用檢查表達式合法性，經過new Function(`return ${exp}`)檢查關鍵字和不合法表達式 * (4). 事件handler檢查，關鍵字等，有個特殊狀況，好比說$delete和delete，會先匹配是否有delete關鍵字，而後$delete，匹配$字符，$delete，$set等對應的正是第一篇中提到的，實例上的api * 6. 此時的compile是提供對外提供的編譯功能包 * */

複製代碼

1.3 包裝compile成compileToFunctions

在compile的基礎上包裝成compileToFunctions，此時獲取的render已是一個方法實例，經過new Function(code)獲得java

/** * 1. vue編譯模板後轉換ast成字符串代碼塊，須要提供一個執行環境，就是new Function(code)，不過這屬於執行動態代碼行爲，有些瀏覽器策略會禁止這種形式，還有相似的，好比eval方法，因此要檢測報錯爲瀏覽器安全策略問題致使vue不可用 * 2. 這邊能夠提一下爲何模板中的變量能夠直接訪問到實例上對應的屬性，vue用了with(){}語句，改變做用域 * 3. 設置模板緩存，避免對編譯過的內容再次編譯，直接用template自己做爲key，是否是屬性名稱不限制長度呀 * 4. 開始對編譯過程當中收集的errors和tips循環輸出，也就是開發中的那一堆堆飄紅報錯統一從這邊輸出 * 5. 調用createFunction，經過new Function(compiled.render)構造方法實例，而且步驟相關錯誤 * 6. 此時的render，staticRenderFns是一個完整正確的渲染方法，vue掛載的時候調用的正是這兩類 * */

複製代碼

2. 開始咱們的代碼塊生成之旅，codegen

上面提到了渲染代碼塊和方法的生成過程，接下來咱們深刻到他們的具體生成流程node

2.1 入口方法generate

// 若是不存在ast，默認生成div dom
// vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
const code = ast ? genElement(ast, state) : '_c("div")'
// render的初始化模板
render: `with(this){return ${code}}`,

// 靜態渲染函數組初始值[]
staticRenderFns: state.staticRenderFns

複製代碼

2.2 關於template在v-pre下的兩個現象

<!--v-pre指令在編譯模板的根標籤上時 全局state.pre爲true， 不能解析v-pre中的template 會以這種形式存在 <template> #document-fragment </template> 不會展現template下的內容 關於文檔片斷節點 能夠查看這裏https://www.cnblogs.com/xiaohuochai/p/5816048.html <* 摘抄 javascript提供了一個文檔片斷DocumentFragment的機制。若是將文檔中的節點添加到文檔片斷中， 就會從文檔樹中移除該節點。把全部要構造的節點都放在文檔片斷中執行， 這樣能夠不影響文檔樹，也就不會形成頁面渲染。當節點都構造完成後， 再將文檔片斷對象添加到頁面中，這時全部的節點都會一次性渲染出來， 這樣就能減小瀏覽器負擔，提升頁面渲染速度 *> -->
<div v-pre>  
  <div>
    <p>xxx</p>
    <p>yyy</p>
    <template>
      <span>{{xxx}}</span>
    </template>
  </div>
</div>

複製代碼

<!--v-pre指令在編譯模板的根標籤上時 全局state.pre爲false， 在處理template時，丟棄template自己，內容做爲該節點的children處理 <span>中的內容將照正常dom顯示 -->
<div>  
  <div v-pre>
    <p>xxx</p>
    <p>yyy</p>
    <template>
      <span>{{xxx}}</span>
    </template>
  </div>
</div>

複製代碼

2.3 靜態節點樹解析

假設接下來是咱們要處理html算法

<section class="parse-index" :xx="xxx">
  <div class="static-tree">              // div1
    <div style="height: 10px;">
      <p>靜態節點p</p>
      <p>靜態節點span</p>
      <input value="靜態節點p"/>
    </div>
  </div>
</section>

複製代碼

/** * 1. 很明顯div1是靜態節點樹的根節點 * 2. staticRoot=true，el.staticProcessed = false，調用genStatic，修改el.staticProcessed = false * 3. 碰見一個靜態節點樹就調用一次genStatic，state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`) * 4. 子節點繼續調用genElement正常執行生成流程 * 5. 改造字符代碼塊，_m=renderStatic，傳入當前staticRenderFns，以及是否在for循環中的標記staticInFor * `_m(${ * state.staticRenderFns.length - 1 * }${ * el.staticInFor ? ',true' : '' * })` * 6. 上面的講述中，略過了genElement的具體過程，可查看 ### 2.4 genElement的處理內容 * */

// hoist static sub-trees out
function genStatic (el: ASTElement, state: CodegenState): string {
  el.staticProcessed = true
  // Some elements (templates) need to behave differently inside of a v-pre
  // node. All pre nodes are static roots, so we can use this as a location to
  // wrap a state change and reset it upon exiting the pre node.
  // 這邊是一個state暫存器 相似一個開關 在處理完全部static內容後 恢復爲state最初的pre標誌
  const originalPreState = state.pre
  if (el.pre) {
    // 在pre下全部element也應該有pre=true的標識 且會影響到data的生成
    state.pre = el.pre
  }
  // 從這段邏輯來看 它把各個靜態根節點渲染方法分截存儲 
  // 若是存在多個靜態分段 就會有多個靜態根節點 每一個都會生成一段靜態渲染代碼
  // 推入staticRenderFns
  state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`)
  state.pre = originalPreState
  // target._m = renderStatic
  // 返回當前靜態渲染code片斷
  return `_m(${ state.staticRenderFns.length - 1 }${ el.staticInFor ? ',true' : '' })`
}
複製代碼

2.4 genOnce的處理內容

/** * 1. 調用genOnce，onceProcessed = true，且流程中中有三個狀況分支處理， * 2. v-once帶有if指令，則先解析if條件，在if中有處理once的狀況，完整閉環，細節咱們再genIf的時候講到 * 3. el.staticInFor若是爲true，表示該el爲for循環下的靜態節點，向上查找節點的key屬性，若是沒有找到提示once指令只能放置在有key設置的v-for循環內部 * 4. 若是沒有設置key，能夠在頁面生成，可是會對diff算法產生影響 * 5. 若是有key屬性，返回`_o(${genElement(el, state)},${state.onceId++},${key})`，_o = markOnce * 6. 若是沒有if條件塊也不是在for循環中，則當成是一個靜態樹形根節點來處理，可是假如裏面有實例變量呢， * 因此這邊所謂的靜態渲染方法其實不是說裏面的內容必定是沒有變量什麼的，而是能夠有各類實例訪問或者不訪問都行，可是隻執行一次，只是爲渲染邏輯提供方便，後續詳解這塊內容 * 7. 在這邊把once指令中的內容當作靜態節點樹處理，會渲染一次且能夠訪問實例上的屬性 * */

// v-once 對once存在的幾種狀況判斷 生成對應的代碼塊
function genOnce (el: ASTElement, state: CodegenState): string {
  el.onceProcessed = true
  if (el.if && !el.ifProcessed) {
    return genIf(el, state)
    // once在static中
  } else if (el.staticInFor) {
    let key = ''
    let parent = el.parent
    // 向上追溯for標籤所在el
    while (parent) {
      if (parent.for) {
        key = parent.key
        break
      }
      parent = parent.parent
    }
    // 追溯中未發現for循環中el的key標識 發出警告 可是並未中斷代碼塊生成
    if (!key) {
      process.env.NODE_ENV !== 'production' && state.warn(
        `v-once can only be used inside v-for that is keyed. `,
        el.rawAttrsMap['v-once']
      )
      return genElement(el, state)
    }
    // target._o = markOnce 渲染once相關函數 onceId
    return `_o(${genElement(el, state)},${state.onceId++},${key})`
  } else {
    return genStatic(el, state)
  }
}
複製代碼

2.5 genFor的處理內容

/** * 1. 在是組件不是保留標籤&&tag !== slot&&tag !== template的狀況下，須要設置key屬性，用於diff算法，後續會提到 * 2. 標記forProcessed=true * 3. 假設<div v-for="item in list">div</div>將生成這個字符串，_l((list),function(item){return _c('div',[_v("div")])}) * (1). 其中_l = renderList，_c = createElement，_v = createTextVNode * (2). 有個細節，_l((list), ...)，括號包裹list，這就成了個表達式，會執行(list)，對應的狀況就是list不必定是一個現成的結果對象或數組，有多是一個computed中聲明的對象須要執行get才能拿到具體值，或者是個方法，返回結果纔是咱們預期的循環目標 * 4. 假設<child v-for="item in list">div</child>將生成這個字符串，_l((list),function(item){return _c('child',[_v("div")])}) * 5. 上面示例中咱們沒有帶上迭代器，<child v-for="item, key, index in list">div</child> * 將獲得_l((obj),function(item,key,index){return _c('child',[_v("div")])})，多了一個參數組裝部分，在renderList的參數方法中加上了迭代參數function(item,key,index) * 6. 接下來繼續執行genElement，包裝返回結果 * */

export function genFor ( el: any, state: CodegenState, altGen?: Function, altHelper?: string ): string {
  const exp = el.for
  const alias = el.alias
  const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
  const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''

  // key檢查 for循環中須要key來處理diff算法
  if (process.env.NODE_ENV !== 'production' &&
    state.maybeComponent(el) &&
    el.tag !== 'slot' &&
    el.tag !== 'template' &&
    !el.key
  ) {
    state.warn(
      `<${el.tag} v-for="${alias} in ${exp}">: component lists rendered with ` +
      `v-for should have explicit keys. ` +
      `See https://vuejs.org/guide/list.html#key for more info.`,
      el.rawAttrsMap['v-for'],
      true /* tip */
    )
  }

  el.forProcessed = true // avoid recursion
  // target._l = renderList
  return `${altHelper || '_l'}((${exp}),` +
    `function(${alias}${iterator1}${iterator2}){` +
      `return ${(altGen || genElement)(el, state)}` +
    '})'
}
複製代碼

2.6 genIf的處理內容

/** * 1. el.ifProcessed = true * 2. 執行genIfConditions，傳入el.ifConditions.slice()，截取副本入參 * 3. 若是conditions長度爲0，則'_e()'，建立空節點 * 4. 例子正常的if-else * <div v-if="showIf">if</div> * <div v-else-if="showElseIf">if</div> * <div v-else>else</div> * 該例中，conditions=[{exp:'showIf'}, {exp: 'showElseIf'}, {exp: undefined}]， * 處理第一個元素時，(showIf)?_c('div',[_v("if")]):... * 將會執行(showIf)表達式，選擇前半部分或者後半部分渲染內容 * 處理完第二個元素時，(showIf)?_c('div',[_v("if")]):(showElseIf)?_c('div',[_v("if")]):_c('div',[_v("else")])，構造三元表達式來執行選擇性渲染 * 5. 若是帶有v-once指令，渲染方法替換成_m=markOnce，like (a)?_m(0):_m(1) * */


// 核心 生成三元運算符來判斷該渲染的代碼塊
export function genIf ( el: any, state: CodegenState, altGen?: Function, altEmpty?: string ): string {
  el.ifProcessed = true // avoid recursion
  // 處理conditions
  return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)
}

function genIfConditions ( conditions: ASTIfConditions, state: CodegenState, altGen?: Function, altEmpty?: string ): string {
  if (!conditions.length) {
    // target._e = createEmptyVNode // 生成一個空vnode節點
    return altEmpty || '_e()'
  }

  const condition = conditions.shift()
  if (condition.exp) {
    return `(${condition.exp})?${ genTernaryExp(condition.block) }:${ genIfConditions(conditions, state, altGen, altEmpty) }`
  } else {
    return `${genTernaryExp(condition.block)}`
  }

  // v-if with v-once should generate code like (a)?_m(0):_m(1)
  function genTernaryExp (el) {
    return altGen
      ? altGen(el, state)
      : el.once
        ? genOnce(el, state)
        : genElement(el, state)
  }
}
複製代碼

2.7 genSlot的處理內容

/** * 1. 解析el.tag === 'slot'的狀況，const slotName = el.slotName || '"default"' * 2. 有可能<slot><div>div</div></slot>，若是沒有在外層指定插槽內容，則會顯示它自帶的內容 * 3. 太多狀況了 看vue測試單元用例 很直觀 * */

複製代碼

2.8 genProps的處理內容

/** * 1. 分紅靜態屬性和動態屬性處理，在瀏覽器環境下，字符串表達式不容許換行，須要transformSpecialNewlines轉換 * 2. 例子 * <div userpassword="123445"></div> * <div :[username]="className"></div> * <div :username="className"></div> * <input :value.prop="className"></input> * (1). {"userpassword":"123445"} * (2). _d({},[username,className]) // _d = bindDynamicKeys綁定動態key * (3). {"username":className} * (4). {"value":className} * 生成的拼接語句 * (1). 一種是attrs相關的，attrs:{"username":className}, * (2). 一種是domprop相關的，domProps:{"value":className}, * (3). 一種是對應動態屬性名稱的，_b({},"div",_d({},[username,className]))，這邊已經涉及到咱們genData的內容了 * */

複製代碼

2.9 genComponent屬性數據的處理

/** * 1. 若是el.component=true，執行genComponent解析 * 2. 若是是非內聯模板，則調用genChildren繼續解析，children來源在這裏 * if (element.slotScope) { * // scoped slot * // keep it in the children list so that v-else(-if) conditions can * // find it as the prev node. * const name = element.slotTarget || '"default"' * ;(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element * } * currentParent.children.push(element) * 3. 這邊不詳細解析內部渲染邏輯 * */

複製代碼

2.10 genData屬性數據的處理

/** * 1. 若是el節點不是純淨節點!el.plain，則解析獲得data * 2. 若是el.inlineTemplate = false，解析子節點，拼接code * 3. 生成的data做爲_c方法的參數使用，總體表現形式是一個對象字符序列化，在實際執行的時候它就是一個option對象{} * 4. 調用genDirectives處理指令相關信息 * 5. el.key => data += `key:${el.key},` * 6. el.ref => data += `ref:${el.ref},` * 7. el.refInFor => data += `refInFor:true,` * 8. el.pre => data += `pre:true,` * 9. el.component => data += `tag:"${el.tag}",` * 10. 過一遍state.dataGenFns，處理style，class屬性綁定生成 * (1). <input class="username-static" :class="dynamicClass"/> => staticClass:"username-static",class:dynamicClass, * (2). <input style="padding-left: 10px;" :style="dynamicStyle"/> => staticStyle:{"padding-left":"10px"},style:(dynamicStyle), * 11. el.attrs => data += `attrs:${genProps(el.attrs)},` * 12. el.props => data += `domProps:${genProps(el.props)},` * 13. el.events => data += `${genHandlers(el.events, false)},`，genHandler請查看 ### 2.12 genHandlers的處理內容 * 14. el.nativeEvents => data += `${genHandlers(el.events, false)},`，genHandler請查看 ### 2.12 genHandlers的處理內容 * 15. el.slotTarget && !el.slotScope => data += `slot:${el.slotTarget},` * 16. genScopedSlots處理內容 查看 ### 2.13 genScopedSlots處理內容 * 17. 通過上面指令處理，若是存在el.model則包裝一遍 * data += `model:{value:${ * el.model.value * },callback:${ * el.model.callback * },expression:${ * el.model.expression * }},` * */

複製代碼

2.11 genChildren的處理內容

/** * 1. 對el爲for循環標記，下屬子元素單一的進行優化處理，執行genElement生成代碼，而且附帶normalizationType，關於子節點規範化類型參數，後續會講到 * 2. 非上述狀況則對children map處理 * */

複製代碼

2.11 genDirectives的處理內容

/** * 1. 內建指令 在directives中收集的指令有 cloak html model text，咱們把這四種狀況拆分講解 * (1). v-html，本質上就是掛載屬性innerHTML，`_s(${dir.value})`，_s = toString * (2). v-text，本質上是掛載textContent屬性，`_s(${dir.value})` * (3). v-cloak，講一下個人理解，首先這個指令的做用是屏蔽在vue實例完成編譯以前的樣式控制，通常用來加樣式display，由於在編譯完成前的空檔會有表達式等原樣顯示，編譯結束後賦值就會有閃爍的狀況等， * 樣式是經過屬性選擇器完成匹配[v-cloak]{display: none}，那理論上我取什麼名字都能有這個效果呀，爲啥只能cloak呢， * 由於在編譯的時候v-xxx這種格式的會被編譯成指令，若是沒有在指令文件中找到匹配的處理方法的話會報編譯錯誤，而vue中預先定義了cloak的指令內容，雖然方法是個 * noop空方法，可是佔位置定義了cloak了，這樣解析的時候就不會報錯了，編譯後正常顯示內容是由於移除了v-cloak指令屬性 ********** * (4). v-model，內容比較多，單獨列出來 * 2. v-model，調用model方法，若是el.tag === 'input' && type === 'file'，不能使用雙向綁定，只讀類型 * (1). 若是是自定義組件genComponentModel，咱們分三種狀況給三種結果，其中value="(username)"，expression=""username"" * <child v-model="username"></child> // callback="function ($$v) {username=$$v}" * <child v-model.trim="username"></child> // callback="function ($$v) {username=(typeof $$v === 'string'? $$v.trim(): $$v)}" * <child v-model.number="username"></child> // callback="function ($$v) {username=_n($$v)}" * * <child v-model="username"></child> // dirs="directives:[{name:"model",rawName:"v-model",value:(username),expression:"username"}]" * <child v-model.trim="username"></child> // dirs="directives:[{name:"model",rawName:"v-model.trim",value:(username),expression:"username",modifiers:{"trim":true}}]" * <child v-model.number="username"></child> // dirs="directives:[{name:"model",rawName:"v-model.number",value:(username),expression:"username",modifiers:{"number":true}}]" * * */

複製代碼

2.12 genHandlers的處理內容

/** * 1. const prefix = isNative ? 'nativeOn:' : 'on:' // 根據isNative肯定代碼塊前綴 * 2. 不綁定handler的狀況<child @click></child> // 生成的結果=on:{"click":function($event){}} * 3. 綁定handler爲數組的狀況 <child @do-handler="handlers"></child> handlers=[fn,fn] // on:{"do-handler":handlers}，這種狀況handler解析出來的表達式爲"handlers" * 4. 真正handlers爲數組的例子 <div @click="handlers">div</div> // 生成的結果on:{"click":handlers} * 5. 3和4中的handers這種綁定方式並非多個handlers數組綁定，只能算是一個普通表達式，後續我給你們找個handlers數組的例子 * 6. 經過simplePathRE正則匹配判斷是否爲簡單路徑的handler方法，也就是相似這種handlClick或者handlerObj.handlClick等這種簡單表達式形式 doThis * 對應的是這種形式 <div @click="handlerClick">div</div> 輸出結果on:{"click":handlerClick} * 7. 經過fnExpRE判斷是否爲方法格式的handler綁定，相似這種<div @click="function () {handlerClick()}">div</div>，結果=on:{"click":function () {handlerClick()}} * 對應的是這種形式 <div @click="function () {handlerClick()}">div</div> * 8. 經過fnInvokeRE替換剩下的知足simplePathRE，也就是存在方法調用的狀況 輸出結果=on:{"click":function($event){return handlerClick()}} * 對應的是這種形式 <div @click="handlerClick()">div</div>，和6對比一下，區別是啥，調用的時候 * (1). 有傳遞dom原生事件對象$event，沒法傳自定義參數 * (2). 沒有有傳遞dom原生事件對象$event，能夠自定義參數傳遞，可是獲取不到$event * (3). 中間那種正好解決這兩種的狀況，可是不優雅，所提提供了這三種模式<div @click="function (e) {handlerClick(e, 'custom')}">div</div> * 9. 以上狀況都是沒有帶修飾符下的處理，進行第一輪修飾符處理假設 * modifierCode map以下 * stop: '$event.stopPropagation();', * prevent: '$event.preventDefault();', * self: genGuard(`$event.target !== $event.currentTarget`), * ctrl: genGuard(`!$event.ctrlKey`), * shift: genGuard(`!$event.shiftKey`), * alt: genGuard(`!$event.altKey`), * meta: genGuard(`!$event.metaKey`), * left: genGuard(`'button' in $event && $event.button !== 0`), * middle: genGuard(`'button' in $event && $event.button !== 1`), * right: genGuard(`'button' in $event && $event.button !== 2`) * 假設<input @click.middle="handler1">div</input> 生成這麼一個條件表達式if('button' in $event && $event.button !== 1)return null;，對應的鍵值keys也會被記錄下來 * 10. exact修飾符的處理，系統鍵['ctrl', 'shift', 'alt', 'meta']過濾出不在這邊的鍵值，輸出結果=if($event.ctrlKey||$event.shiftKey||$event.metaKey)return null; * 關於exact的做用，就是系統鍵之間能夠作到觸發精確的按鍵事件，具體能夠看文檔， * 一直按着alt + 其餘普通鍵能夠觸發alt，一直按着alt+shift也能夠觸發alt，加上exact以後就不會再觸發 * 11. 其餘未內置的修飾符key直接push進keys * 12. keys遍歷組裝代碼塊，<input @keydow.down="handler1">div</input> 輸出結果=if(!$event.type.indexOf('key')&&_k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"]))return null; * _k = checkKeyCodes，檢查事件與鍵盤按鍵事件的對應關係 * 13. 接下來又是對三種綁定handle類型的對應處理 * */

複製代碼

2.13 genScopedSlots處理內容

/** * 1. 判斷是否須要強制刷新needsForceUpdate 執行containsSlotChild，若是el.type === 1也就是經常使用節點，tag === 'slot'返回true * 2. 若是上述判斷尚未肯定needsForceUpdate爲true，則再進一步判斷存在slotScope做用域的須要強制更新 * 3. 開始map遍歷slots生成代碼塊 * 4. <child> * <template v-slot:header> * <span>header</span> * </template> * </child> * 生成的結果=scopedSlots:_u([{key:"header",fn:function(){return [_c('span',[_v("header")])]},proxy:true}]), `${genScopedSlots(el, el.scopedSlots, state)}, * */

複製代碼

若是能夠，請喝杯咖啡，ヾ(≧▽≦*)o