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

深入了解Vue3模板編譯原理

 更新時間：2020年11月19日 10:25:53   作者：譚光志  
這篇文章主要介紹了深入了解Vue3模板編譯原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

Vue 的編譯模塊包含 4 個目錄：

compiler-core
compiler-dom // 瀏覽器
compiler-sfc // 單文件組件
compiler-ssr // 服務端渲染

其中 compiler-core 模塊是 Vue 編譯的核心模塊，并且是平臺無關的。而剩下的三個都是在 compiler-core 的基礎上針對不同的平臺作了適配處理。

Vue 的編譯分為三個階段，分別是：parse、transform、codegen。

其中 parse 階段將模板字符串轉化為語法抽象樹 AST。transform 階段則是對 AST 進行了一些轉換處理。codegen 階段根據(jù) AST 生成對應的 render 函數(shù)字符串。

Parse

Vue 在解析模板字符串時，可分為兩種情況：以 < 開頭的字符串和不以 < 開頭的字符串。

不以 < 開頭的字符串有兩種情況：它是文本節(jié)點或 {{ exp }} 插值表達式。

而以 < 開頭的字符串又分為以下幾種情況：

  • 元素開始標簽 <div>
  • 元素結束標簽 </div>
  • 注釋節(jié)點 <!-- 123 -->
  • 文檔聲明 <!DOCTYPE html>

用偽代碼表示，大概過程如下：

e (s.length) {
 if (startsWith(s, '{{')) {
  // 如果以 '{{' 開頭
  node = parseInterpolation(context, mode)
 } else if (s[0] === '<') {
  // 以 < 標簽開頭
  if (s[1] === '!') {
   if (startsWith(s, '<!--')) {
    // 注釋
    node = parseComment(context)
   } else if (startsWith(s, '<!DOCTYPE')) {
    // 文檔聲明，當成注釋處理
    node = parseBogusComment(context)
   }
  } else if (s[1] === '/') {
   // 結束標簽
   parseTag(context, TagType.End, parent)
  } else if (/[a-z]/i.test(s[1])) {
   // 開始標簽
   node = parseElement(context, ancestors)
  }
 } else {
  // 普通文本節(jié)點
  node = parseText(context, mode)
 }
}

在源碼中對應的幾個函數(shù)分別是：

  1. parseChildren() ，主入口。
  2.  parseInterpolation() ，解析雙花插值表達式。
  3. parseComment() ，解析注釋。
  4. parseBogusComment() ，解析文檔聲明。
  5. parseTag() ，解析標簽。
  6. parseElement() ，解析元素節(jié)點，它會在內部執(zhí)行 parseTag() 。
  7. parseText() ，解析普通文本。
  8. parseAttribute() ，解析屬性。

每解析完一個標簽、文本、注釋等節(jié)點時，Vue 就會生成對應的 AST 節(jié)點，并且 會把已經解析完的字符串給截斷 。

對字符串進行截斷使用的是 advanceBy(context, numberOfCharacters) 函數(shù)，context 是字符串的上下文對象，numberOfCharacters 是要截斷的字符數(shù)。

我們用一個簡單的例子來模擬一下截斷操作：

<div name="test">
 <p></p>
</div>

首先解析 <div ，然后執(zhí)行 advanceBy(context, 4) 進行截斷操作（內部執(zhí)行的是 s = s.slice(4) ），變成：

name="test">
 <p></p>
</div>

再解析屬性，并截斷，變成：

 <p></p>
</div>

同理，后面的截斷情況為：

></p>
</div>
</div>
<!-- 所有字符串已經解析完 -->

AST 節(jié)點

所有的 AST 節(jié)點定義都在 compiler-core/ast.ts 文件中，下面是一個元素節(jié)點的定義：

rt interface BaseElementNode extends Node {
 type: NodeTypes.ELEMENT // 類型
 ns: Namespace // 命名空間 默認為 HTML，即 0
 tag: string // 標簽名
 tagType: ElementTypes // 元素類型
 isSelfClosing: boolean // 是否是自閉合標簽 例如 <br/> <hr/>
 props: Array<AttributeNode | DirectiveNode> // props 屬性，包含 HTML 屬性和指令
 children: TemplateChildNode[] // 字節(jié)點
}

一些簡單的要點已經講完了，下面我們再從一個比較復雜的例子來詳細講解一下 parse 的處理過程。

<div name="test">
 <!-- 這是注釋 -->
 <p>{{ test }}</p>
 一個文本節(jié)點
 <div>good job!</div>
</div>

上面的模板字符串假設為 s，第一個字符 s[0] 是 < 開頭，那說明它只能是剛才所說的四種情況之一。 這時需要再看一下 s[1] 的字符是什么：

  • 如果是 ! ，則調用字符串原生方法 startsWith() 看看是以 '<!--' 開頭還是以 '<!DOCTYPE' 開頭。雖然這兩者對應的處理函數(shù)不一樣，但它們最終都是解析為注釋節(jié)點。
  • 如果是 / ，則按結束標簽處理。
  • 如果不是 / ，則按開始標簽處理。

從我們的示例來看，這是一個 <div> 開始標簽。

這里還有一點要提一下，Vue 會用一個棧 stack 來保存解析到的元素標簽。當它遇到開始標簽時，會將這個標簽推入棧，遇到結束標簽時，將剛才的標簽彈出棧。它的作用是保存當前已經解析了，但還沒解析完的元素標簽。這個棧還有另一個作用，在解析到某個字節(jié)點時，通過 stack[stack.length - 1] 可以獲取它的父元素。

從我們的示例來看，它的出入棧順序是這樣的：

1. [div] // div 入棧
2. [div, p] // p 入棧
3. [div] // p 出棧
4. [div, div] // div 入棧
5. [div] // div 出棧
6. [] // 最后一個 div 出棧，模板字符串已解析完，這時棧為空

接著上文繼續(xù)分析我們的示例，這時已經知道是 div 標簽了，接下來會把已經解析完的 <div 字符串截斷，然后解析它的屬性。

Vue 的屬性有兩種情況：

  • HTML 普通屬性
  • Vue 指令

根據(jù)屬性的不同生成的節(jié)點不同，HTML 普通屬性節(jié)點 type 為 6，Vue 指令節(jié)點 type 為 7。

所有的節(jié)點類型值如下：

ROOT, // 根節(jié)點 0
ELEMENT, // 元素節(jié)點 1
TEXT, // 文本節(jié)點 2
COMMENT, // 注釋節(jié)點 3
SIMPLE_EXPRESSION, // 表達式 4
INTERPOLATION, // 雙花插值 {{ }} 5
ATTRIBUTE, // 屬性 6
DIRECTIVE, // 指令 7

屬性解析完后， div 開始標簽也就解析完了， <div name="test"> 這一行字符串已經被截斷?，F(xiàn)在剩下的字符串如下：

 <!-- 這是注釋 -->
 <p>{{ test }}</p>
 一個文本節(jié)點
 <div>good job!</div>
</div>

注釋文本和普通文本節(jié)點解析規(guī)則都很簡單，直接截斷，生成節(jié)點。注釋文本調用 parseComment() 函數(shù)處理，文本節(jié)點調用 parseText() 處理。

雙花插值的字符串處理邏輯稍微復雜點，例如示例中的 {{ test }} ：

  • 先將雙花括號中的內容提取出來，即 test ，再對它執(zhí)行 trim() ，去除空格。
  • 然后會生成兩個節(jié)點，一個節(jié)點是 INTERPOLATION ，type 為 5，表示它是雙花插值。
  • 第二個節(jié)點是它的內容，即 test ，它會生成一個 SIMPLE_EXPRESSION 節(jié)點，type 為 4。
turn {
 type: NodeTypes.INTERPOLATION, // 雙花插值類型
 content: {
 type: NodeTypes.SIMPLE_EXPRESSION,
 isStatic: false, // 非靜態(tài)節(jié)點
 isConstant: false,
 content,
 loc: getSelection(context, innerStart, innerEnd)
 },
 loc: getSelection(context, start)
}

剩下的字符串解析邏輯和上文的差不多，就不解釋了，最后這個示例解析出來的 AST 如下所示：

從 AST 上，我們還能看到某些節(jié)點上有一些別的屬性：

  • ns，命名空間，一般為 HTML，值為 0。
  • loc，它是一個位置信息，表明這個節(jié)點在源 HTML 字符串中的位置，包含行，列，偏移量等信息。
  • {{ test }} 解析出來的節(jié)點會有一個 isStatic 屬性，值為 false，表示這是一個動態(tài)節(jié)點。如果是靜態(tài)節(jié)點，則只會生成一次，并且在后面的階段一直復用同一個，不用進行 diff 比較

另外還有一個 tagType 屬性，它有 4 個值：

t const enum ElementTypes {
 ELEMENT, // 0 元素節(jié)點
 COMPONENT, // 1 組件
 SLOT, // 2 插槽
 TEMPLATE // 3 模板
}

主要用于區(qū)分上述四種類型節(jié)點。

Transform

在 transform 階段，Vue 會對 AST 進行一些轉換操作，主要是根據(jù)不同的 AST 節(jié)點添加不同的選項參數(shù)，這些參數(shù)在 codegen 階段會用到。下面列舉一些比較重要的選項：

cacheHandlers

如果 cacheHandlers 的值為 true，則表示開啟事件函數(shù)緩存。例如 @click="foo" 默認編譯為 { onClick: foo } ，如果開啟了這個選項，則編譯為

{ onClick: _cache[0] || (_cache[0] = e => _ctx.foo(e)) }

hoistStatic

hoistStatic 是一個標識符，表示要不要開啟靜態(tài)節(jié)點提升。如果值為 true，靜態(tài)節(jié)點將被提升到 render() 函數(shù)外面生成，并被命名為 _hoisted_x 變量。

例如 一個文本節(jié)點 生成的代碼為 const _hoisted_2 = /*#__PURE__*/_createTextVNode(" 一個文本節(jié)點 ") 。

下面兩張圖，前者是 hoistStatic = false ，后面是 hoistStatic = true 。大家可以在 網站 上自己試一下。

prefixIdentifiers

這個參數(shù)的作用是用于代碼生成。例如 {{ foo }} 在 module 模式下生成的代碼為 _ctx.foo ，而在 function 模式下是 with (this) { ... } 。因為在 module 模式下，默認為嚴格模式，不能使用 with 語句。

PatchFlags

transform 在對 AST 節(jié)點進行轉換時，會打上 patchflag 參數(shù)，這個參數(shù)主要用于 diff 比較過程。當 DOM 節(jié)點有這個標志并且大于 0，就代表要更新，沒有就跳過。

我們來看一下 patchflag 的取值范圍：

enum PatchFlags {
 // 動態(tài)文本節(jié)點
 TEXT = 1,

 // 動態(tài) class
 CLASS = 1 << 1, // 2

 // 動態(tài) style
 STYLE = 1 << 2, // 4

 // 動態(tài)屬性，但不包含類名和樣式
 // 如果是組件，則可以包含類名和樣式
 PROPS = 1 << 3, // 8

 // 具有動態(tài) key 屬性，當 key 改變時，需要進行完整的 diff 比較。
 FULL_PROPS = 1 << 4, // 16

 // 帶有監(jiān)聽事件的節(jié)點
 HYDRATE_EVENTS = 1 << 5, // 32

 // 一個不會改變子節(jié)點順序的 fragment
 STABLE_FRAGMENT = 1 << 6, // 64

 // 帶有 key 屬性的 fragment 或部分子字節(jié)有 key
 KEYED_FRAGMENT = 1 << 7, // 128

 // 子節(jié)點沒有 key 的 fragment
 UNKEYED_FRAGMENT = 1 << 8, // 256

 // 一個節(jié)點只會進行非 props 比較
 NEED_PATCH = 1 << 9, // 512

 // 動態(tài) slot
 DYNAMIC_SLOTS = 1 << 10, // 1024

 // 靜態(tài)節(jié)點
 HOISTED = -1,

 // 指示在 diff 過程應該要退出優(yōu)化模式
 BAIL = -2
}

從上述代碼可以看出 patchflag 使用一個 11 位的位圖來表示不同的值，每個值都有不同的含義。Vue 在 diff 過程會根據(jù)不同的 patchflag 使用不同的 patch 方法。

下圖是經過 transform 后的 AST：

可以看到 codegenNode、helpers 和 hoists 已經被填充上了相應的值。codegenNode 是生成代碼要用到的數(shù)據(jù)，hoists 存儲的是靜態(tài)節(jié)點，helpers 存儲的是創(chuàng)建 VNode 的函數(shù)名稱（其實是 Symbol）。

在正式開始 transform 前，需要創(chuàng)建一個 transformContext，即 transform 上下文。和這三個屬性有關的數(shù)據(jù)和方法如下：

helpers: new Set(),
hoists: [],

// methods
helper(name) {
 context.helpers.add(name)
 return name
},
helperString(name) {
 return `_${helperNameMap[context.helper(name)]}`
},
hoist(exp) {
 context.hoists.push(exp)
 const identifier = createSimpleExpression(
 `_hoisted_${context.hoists.length}`,
 false,
 exp.loc,
 true
 )
 identifier.hoisted = exp
 return identifier
},

我們來看一下具體的 transform 過程是怎樣的，用 <p>{{ test }}</p> 來做示例。

這個節(jié)點對應的是 transformElement() 轉換函數(shù)，由于 p 沒有綁定動態(tài)屬性，沒有綁定指令，所以重點不在它，而是在 {{ test }} 上。 {{ test }} 是一個雙花插值表達式，所以將它的 patchFlag 設為 1（動態(tài)文本節(jié)點），對應的執(zhí)行代碼是 patchFlag |= 1 。然后再執(zhí)行 createVNodeCall() 函數(shù)，它的返回值就是這個節(jié)點的 codegenNode 值。

node.codegenNode = createVNodeCall(
 context,
 vnodeTag,
 vnodeProps,
 vnodeChildren,
 vnodePatchFlag,
 vnodeDynamicProps,
 vnodeDirectives,
 !!shouldUseBlock,
 false /* disableTracking */,
 node.loc
)

createVNodeCall() 根據(jù)這個節(jié)點添加了一個 createVNode Symbol 符號，它放在 helpers 里。其實就是要在代碼生成階段引入的幫助函數(shù)。

// createVNodeCall() 內部執(zhí)行過程，已刪除多余的代碼
context.helper(CREATE_VNODE)

return {
 type: NodeTypes.VNODE_CALL,
 tag,
 props,
 children,
 patchFlag,
 dynamicProps,
 directives,
 isBlock,
 disableTracking,
 loc
}

hoists

一個節(jié)點是否添加到 hoists 中，主要看它是不是靜態(tài)節(jié)點，并且需要將 hoistStatic 設為 true。

<div name="test"> // 屬性靜態(tài)節(jié)點
 <!-- 這是注釋 -->
 <p>{{ test }}</p>
 一個文本節(jié)點 // 靜態(tài)節(jié)點
 <div>good job!</div> // 靜態(tài)節(jié)點
</div>

可以看到，上面有三個靜態(tài)節(jié)點，所以 hoists 數(shù)組有 3 個值。并且無論靜態(tài)節(jié)點嵌套有多深，都會被提升到 hoists 中。

type 變化

從上圖可以看到，最外層的 div 的 type 原來為 1，經過 transform 生成的 codegenNode 中的 type 變成了 13。 這個 13 是代碼生成對應的類型 VNODE_CALL 。另外還有:

// codegen
VNODE_CALL, // 13
JS_CALL_EXPRESSION, // 14
JS_OBJECT_EXPRESSION, // 15
JS_PROPERTY, // 16
JS_ARRAY_EXPRESSION, // 17
JS_FUNCTION_EXPRESSION, // 18
JS_CONDITIONAL_EXPRESSION, // 19
JS_CACHE_EXPRESSION, // 20

剛才提到的例子 {{ test }} ，它的 codegenNode 就是通過調用 createVNodeCall() 生成的：

{
 type: NodeTypes.VNODE_CALL,
 tag,
 props,
 children,
 patchFlag,
 dynamicProps,
 directives,
 isBlock,
 disableTracking,
 loc
}

可以從上述代碼看到，type 被設置為 NodeTypes.VNODE_CALL，即 13。

每個不同的節(jié)點都由不同的 transform 函數(shù)來處理，由于篇幅有限，具體代碼請自行查閱。

Codegen

代碼生成階段最后生成了一個字符串，我們把字符串的雙引號去掉，看一下具體的內容是什么：

nst _Vue = Vue
const { createVNode: _createVNode, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode } = _Vue

const _hoisted_1 = { name: "test" }
const _hoisted_2 = /*#__PURE__*/_createTextVNode(" 一個文本節(jié)點 ")
const _hoisted_3 = /*#__PURE__*/_createVNode("div", null, "good job!", -1 /* HOISTED */)

return function render(_ctx, _cache) {
 with (_ctx) {
 const { createCommentVNode: _createCommentVNode, toDisplayString: _toDisplayString, createVNode: _createVNode, createTextVNode: _createTextVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue

 return (_openBlock(), _createBlock("div", _hoisted_1, [
  _createCommentVNode(" 這是注釋 "),
  _createVNode("p", null, _toDisplayString(test), 1 /* TEXT */),
  _hoisted_2,
  _hoisted_3
 ]))
 }
}

代碼生成模式

可以看到上述代碼最后返回一個 render() 函數(shù)，作用是生成對應的 VNode。

其實代碼生成有兩種模式：module 和 function，由標識符 prefixIdentifiers 決定使用哪種模式。

function 模式的特點是：使用 const { helpers... } = Vue 的方式來引入幫助函數(shù)，也就是是 createVode() createCommentVNode() 這些函數(shù)。向外導出使用 return 返回整個 render() 函數(shù)。

module 模式的特點是：使用 es6 模塊來導入導出函數(shù)，也就是使用 import 和 export。

靜態(tài)節(jié)點

另外還有三個變量是用 _hoisted_ 命名的，后面跟著數(shù)字，代表這是第幾個靜態(tài)變量。 再看一下 parse 階段的 HTML 模板字符串：

<div name="test">
 <!-- 這是注釋 -->
 <p>{{ test }}</p>
 一個文本節(jié)點
 <div>good job!</div>
</div>

這個示例只有一個動態(tài)節(jié)點，即 {{ test }} ，剩下的全是靜態(tài)節(jié)點。從生成的代碼中也可以看出，生成的節(jié)點和模板中的代碼是一一對應的。靜態(tài)節(jié)點的作用就是只生成一次，以后直接復用。

細心的網友可能發(fā)現(xiàn)了 _hoisted_2 和 _hoisted_3 變量中都有一個 /*#__PURE__*/ 注釋。

這個注釋的作用是表示這個函數(shù)是純函數(shù)，沒有副作用，主要用于 tree-shaking。壓縮工具在打包時會將未被使用的代碼直接刪除（shaking 搖掉）。

再來看一下生成動態(tài)節(jié)點 {{ test }} 的代碼： _createVNode("p", null, _toDisplayString(test), 1 /* TEXT */) 。

其中 _toDisplayString(test) 的內部實現(xiàn)是：

n val == null
 ? ''
 : isObject(val)
  ? JSON.stringify(val, replacer, 2)
  : String(val)

代碼很簡單，就是轉成字符串輸出。

而 _createVNode("p", null, _toDisplayString(test), 1 /* TEXT */) 最后一個參數(shù) 1 就是 transform 添加的 patchflag 了。

幫助函數(shù) helpers

在 transform、codegen 這兩個階段，我們都能看到 helpers 的影子，到底 helpers 是干什么用的？

// Name mapping for runtime helpers that need to be imported from 'vue' in
// generated code. Make sure these are correctly exported in the runtime!
// Using `any` here because TS doesn't allow symbols as index type.
export const helperNameMap: any = {
 [FRAGMENT]: `Fragment`,
 [TELEPORT]: `Teleport`,
 [SUSPENSE]: `Suspense`,
 [KEEP_ALIVE]: `KeepAlive`,
 [BASE_TRANSITION]: `BaseTransition`,
 [OPEN_BLOCK]: `openBlock`,
 [CREATE_BLOCK]: `createBlock`,
 [CREATE_VNODE]: `createVNode`,
 [CREATE_COMMENT]: `createCommentVNode`,
 [CREATE_TEXT]: `createTextVNode`,
 [CREATE_STATIC]: `createStaticVNode`,
 [RESOLVE_COMPONENT]: `resolveComponent`,
 [RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`,
 [RESOLVE_DIRECTIVE]: `resolveDirective`,
 [WITH_DIRECTIVES]: `withDirectives`,
 [RENDER_LIST]: `renderList`,
 [RENDER_SLOT]: `renderSlot`,
 [CREATE_SLOTS]: `createSlots`,
 [TO_DISPLAY_STRING]: `toDisplayString`,
 [MERGE_PROPS]: `mergeProps`,
 [TO_HANDLERS]: `toHandlers`,
 [CAMELIZE]: `camelize`,
 [CAPITALIZE]: `capitalize`,
 [SET_BLOCK_TRACKING]: `setBlockTracking`,
 [PUSH_SCOPE_ID]: `pushScopeId`,
 [POP_SCOPE_ID]: `popScopeId`,
 [WITH_SCOPE_ID]: `withScopeId`,
 [WITH_CTX]: `withCtx`
}

export function registerRuntimeHelpers(helpers: any) {
 Object.getOwnPropertySymbols(helpers).forEach(s => {
 helperNameMap[s] = helpers[s]
 })
}

其實幫助函數(shù)就是在代碼生成時從 Vue 引入的一些函數(shù)，以便讓程序正常執(zhí)行，從上面生成的代碼中就可以看出來。而 helperNameMap 是默認的映射表名稱，這些名稱就是要從 Vue 引入的函數(shù)名稱。

另外，我們還能看到一個注冊函數(shù) registerRuntimeHelpers(helpers: any() ，它是干什么用的呢？

我們知道編譯模塊 compiler-core 是平臺無關的，而 compiler-dom 是瀏覽器相關的編譯模塊。為了能在瀏覽器正常運行 Vue 程序，就得把瀏覽器相關的 Vue 數(shù)據(jù)和函數(shù)導入進來。 registerRuntimeHelpers(helpers: any() 正是用來做這件事的，從 compiler-dom 的 runtimeHelpers.ts 文件就能看出來：

registerRuntimeHelpers({
 [V_MODEL_RADIO]: `vModelRadio`,
 [V_MODEL_CHECKBOX]: `vModelCheckbox`,
 [V_MODEL_TEXT]: `vModelText`,
 [V_MODEL_SELECT]: `vModelSelect`,
 [V_MODEL_DYNAMIC]: `vModelDynamic`,
 [V_ON_WITH_MODIFIERS]: `withModifiers`,
 [V_ON_WITH_KEYS]: `withKeys`,
 [V_SHOW]: `vShow`,
 [TRANSITION]: `Transition`,
 [TRANSITION_GROUP]: `TransitionGroup`
})

它運行 registerRuntimeHelpers(helpers: any() ，往映射表注入了瀏覽器相關的部分函數(shù)。

helpers 是怎么使用的呢?

在 parse 階段，解析到不同節(jié)點時會生成對應的 type。

在 transform 階段，會生成一個 helpers，它是一個 set 數(shù)據(jù)結構。每當它轉換 AST 時，都會根據(jù) AST 節(jié)點的 type 添加不同的 helper 函數(shù)。

例如，假設它現(xiàn)在正在轉換的是一個注釋節(jié)點，它會執(zhí)行 context.helper(CREATE_COMMENT) ，內部實現(xiàn)相當于 helpers.add('createCommentVNode') 。然后在 codegen 階段，遍歷 helpers，將程序需要的函數(shù)從 Vue 里導入，代碼實現(xiàn)如下：

// 這是 module 模式
`import { ${ast.helpers
 .map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`)
 .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`

如何生成代碼？

從 codegen.ts 文件中，可以看到很多代碼生成函數(shù)：

generate() // 代碼生成入口文件
genFunctionExpression() // 生成函數(shù)表達式
genNode() // 生成 Vnode 節(jié)點
...

生成代碼則是根據(jù)不同的 AST 節(jié)點調用不同的代碼生成函數(shù)，最終將代碼字符串拼在一起，輸出一個完整的代碼字符串。

老規(guī)矩，還是看一個例子：

t _hoisted_1 = { name: "test" }
const _hoisted_2 = /*#__PURE__*/_createTextVNode(" 一個文本節(jié)點 ")
const _hoisted_3 = /*#__PURE__*/_createVNode("div", null, "good job!", -1 /* HOISTED */)

看一下這段代碼是怎么生成的，首先執(zhí)行 genHoists(ast.hoists, context) ，將 transform 生成的靜態(tài)節(jié)點數(shù)組 hoists 作為第一個參數(shù)。 genHoists() 內部實現(xiàn)：

hoists.forEach((exp, i) => {
 if (exp) {
  push(`const _hoisted_${i + 1} = `);
  genNode(exp, context);
  newline();
 }
})

從上述代碼可以看到，遍歷 hoists 數(shù)組，調用 genNode(exp, context) 。 genNode() 根據(jù)不同的 type 執(zhí)行不同的函數(shù)。

st _hoisted_1 = { name: "test" }

這一行代碼中的 const _hoisted_1 = 由 genHoists() 生成， { name: "test" } 由 genObjectExpression() 生成。 同理，剩下的兩行代碼生成過程也是如此，只是最終調用的函數(shù)不同。

到此這篇關于深入了解Vue3模板編譯原理的文章就介紹到這了,更多相關Vue3模板編譯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論