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
