主頁 > 企業開發 > Vue原始碼閱讀,如何渲染代碼塊生成? 本文詳解

Vue原始碼閱讀,如何渲染代碼塊生成? 本文詳解

2020-09-17 07:40:14 企業開發

 

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=https://www.cnblogs.com/chengxuyuanaa/p/"靜態節點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  :/>  => 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="https://www.cnblogs.com/chengxuyuanaa/p/(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 免費學習哦,有問題我都會盡力幫大家哦

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

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/63846.html

標籤:JavaScript

上一篇:這15道Vue常見面試題,你會幾道??

下一篇:2020最新Vue專案性能優化實戰,80%的人都不會

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more