1. 構造compiler

個人覺得 本章 可以大概看看我寫的內容 最有效的方法是查看測試用例 很詳細 覆蓋很全面 這一段比較繞，主要是包裝compile，最終暴露出compile本身以及包裝後的compileToFunctions

1.1 compiler和compileToFunctions的基礎baseCompile

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

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             // 靜態相關渲染函數
  }
}

除了本文案例。接下來我會在我的圈子分享以下vue實戰視頻教程內容：如果想學習可以進小編扣扣裙： 519293536 免費學習哦。有問題我都會儘力幫大家哦

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

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

/**
* 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)得到

/**
* 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

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

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)},
* */

都會了嗎？接下來才是重點：我會在我的圈子分享以下vue實戰內容：如果想學習可以進小編扣扣裙： 519293536 免費學習哦。有問題我都會儘力幫大家哦

如果想學習以上內容可以進小編扣扣裙： 519293536 免費學習哦。有問題我都會儘力幫大家哦

本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理