[[351771]]

Vue3 正式發(fā)布已經(jīng)有一段時間了，前段時間寫了一篇文章(《Vue 模板編譯原理》)分析 Vue 的模板編譯原理。今天的文章打算學(xué)習(xí)下 Vue3 下的模板編譯與 Vue2 下的差異，以及 VDOM 下 Diff 算法的優(yōu)化。

編譯入口

了解過 Vue3 的同學(xué)肯定知道 Vue3 引入了新的組合 Api，在組件 mount 階段會調(diào)用 setup 方法，之后會判斷 render 方法是否存在，如果不存在會調(diào)用 compile 方法將 template 轉(zhuǎn)化為 render。

// packages/runtime-core/src/renderer.ts 
const mountComponent = (initialVNode, container) => { 
  const instance = ( 
    initialVNode.component = createComponentInstance( 
      // ...params 
    ) 
  ) 
  // 調(diào)用 setup 
  setupComponent(instance) 
} 
 
// packages/runtime-core/src/component.ts 
let compile 
export function registerRuntimeCompiler(_compile) { 
  compile = _compile 
} 
export function setupComponent(instance) { 
  const Component = instance.type 
  const { setup } = Component 
  if (setup) { 
    // ...調(diào)用 setup 
  } 
  if (compile && Component.template && !Component.render) { 
   // 如果沒有 render 方法 
    // 調(diào)用 compile 將 template 轉(zhuǎn)為 render 方法 
    Component.render = compile(Component.template, {...}) 
  } 
} 

這部分都是 runtime-core 中的代碼，之前的文章有講過 Vue 分為完整版和 runtime 版本。如果使用 vue-loader 處理 .vue 文件，一般都會將 .vue 文件中的 template 直接處理成 render 方法。

//  需要編譯器 
Vue.createApp({ 
  template: '<div>{{ hi }}</div>' 
}) 
 
// 不需要 
Vue.createApp({ 
  render() { 
    return Vue.h('div', {}, this.hi) 
  } 
}) 

完整版與 runtime 版的差異就是，完整版會引入 compile 方法，如果是 vue-cli 生成的項目就會抹去這部分代碼，將 compile 過程都放到打包的階段，以此優(yōu)化性能。runtime-dom 中提供了 registerRuntimeCompiler 方法用于注入 compile 方法。

主流程

在完整版的 index.js 中，調(diào)用了 registerRuntimeCompiler 將 compile 進行注入，接下來我們看看注入的 compile 方法主要做了什么。

// packages/vue/src/index.ts 
import { compile } from '@vue/compiler-dom' 
 
// 編譯緩存 
const compileCache = Object.create(null) 
 
// 注入 compile 方法 
function compileToFunction( 
 // 模板 
  template: string | HTMLElement, 
  // 編譯配置 
  options?: CompilerOptions 
): RenderFunction { 
  if (!isString(template)) { 
    // 如果 template 不是字符串 
    // 則認為是一個 DOM 節(jié)點，獲取 innerHTML 
    if (template.nodeType) { 
      template = template.innerHTML 
    } else { 
      return NOOP 
    } 
  } 
 
  // 如果緩存中存在，直接從緩存中獲取 
  const key = template 
  const cached = compileCache[key] 
  if (cached) { 
    return cached 
  } 
 
  // 如果是 ID 選擇器，這獲取 DOM 元素后，取 innerHTML 
  if (template[0] === '#') { 
    const el = document.querySelector(template) 
    template = el ? el.innerHTML : '' 
  } 
 
  // 調(diào)用 compile 獲取 render code 
  const { code } = compile( 
    template, 
    options 
  ) 
 
  // 將 render code 轉(zhuǎn)化為 function 
  const render = new Function(code)(); 
 
 // 返回 render 方法的同時，將其放入緩存 
  return (compileCache[key] = render) 
} 
 
// 注入 compile 
registerRuntimeCompiler(compileToFunction) 

在講 Vue2 模板編譯的時候已經(jīng)講過，compile 方法主要分為三步，Vue3 的邏輯類似：

1. 模板編譯，將模板代碼轉(zhuǎn)化為 AST;
2. 優(yōu)化 AST，方便后續(xù)虛擬 DOM 更新;
3. 生成代碼，將 AST 轉(zhuǎn)化為可執(zhí)行的代碼;

// packages/compiler-dom/src/index.ts 
import { baseCompile, baseParse } from '@vue/compiler-core' 
export function compile(template, options) { 
  return baseCompile(template, options) 
} 
 
// packages/compiler-core/src/compile.ts 
import { baseParse } from './parse' 
import { transform } from './transform' 
 
import { transformIf } from './transforms/vIf' 
import { transformFor } from './transforms/vFor' 
import { transformText } from './transforms/transformText' 
import { transformElement } from './transforms/transformElement' 
 
import { transformOn } from './transforms/vOn' 
import { transformBind } from './transforms/vBind' 
import { transformModel } from './transforms/vModel' 
 
export function baseCompile(template, options) { 
  // 解析 html，轉(zhuǎn)化為 ast 
  const ast = baseParse(template, options) 
  // 優(yōu)化 ast，標記靜態(tài)節(jié)點 
  transform(ast, { 
    ...options, 
    nodeTransforms: [ 
      transformIf, 
      transformFor, 
      transformText, 
      transformElement, 
      // ... 省略了部分 transform 
    ], 
    directiveTransforms: { 
      on: transformOn, 
      bind: transformBind, 
      model: transformModel 
    } 
  }) 
  // 將 ast 轉(zhuǎn)化為可執(zhí)行代碼 
  return generate(ast, options) 
} 

計算 PatchFlag

這里大致的邏輯與之前的并沒有多大的差異，主要是 optimize 方法變成了 transform 方法，而且默認會對一些模板語法進行 transform。這些 transform 就是后續(xù)虛擬 DOM 優(yōu)化的關(guān)鍵，我們先看看 transform 的代碼 。

// packages/compiler-core/src/transform.ts 
export function transform(root, options) { 
  const context = createTransformContext(root, options) 
  traverseNode(root, context) 
} 
export function traverseNode(node, context) { 
  context.currentNode = node 
  const { nodeTransforms } = context 
  const exitFns = [] 
  for (let i = 0; i < nodeTransforms.length; i++) { 
    // Transform 會返回一個退出函數(shù)，在處理完所有的子節(jié)點后再執(zhí)行 
    const onExit = nodeTransforms[i](node, context) 
    if (onExit) { 
      if (isArray(onExit)) { 
        exitFns.push(...onExit) 
      } else { 
        exitFns.push(onExit) 
      } 
    } 
  } 
  traverseChildren(node, context) 
  context.currentNode = node 
  // 執(zhí)行所以 Transform 的退出函數(shù) 
  let i = exitFns.length 
  while (i--) { 
    exitFns[i]() 
  } 
} 

我們重點看一下 transformElement 的邏輯：

// packages/compiler-core/src/transforms/transformElement.ts 
export const transformElement: NodeTransform = (node, context) => { 
  // transformElement 沒有執(zhí)行任何邏輯，而是直接返回了一個退出函數(shù) 
  // 說明 transformElement 需要等所有的子節(jié)點處理完后才執(zhí)行 
  return function postTransformElement() { 
    const { tag, props } = node 
 
    let vnodeProps 
    let vnodePatchFlag 
    const vnodeTag = node.tagType === ElementTypes.COMPONENT 
      ? resolveComponentType(node, context) 
      : `"${tag}"` 
     
    let patchFlag = 0 
    // 檢測節(jié)點屬性 
    if (props.length > 0) { 
      // 檢測節(jié)點屬性的動態(tài)部分 
      const propsBuildResult = buildProps(node, context) 
      vnodeProps = propsBuildResult.props 
      patchFlag = propsBuildResult.patchFlag 
    } 
 
    // 檢測子節(jié)點 
    if (node.children.length > 0) { 
      if (node.children.length === 1) { 
        const child = node.children[0] 
        // 檢測子節(jié)點是否為動態(tài)文本 
        if (!getStaticType(child)) { 
          patchFlag |= PatchFlags.TEXT 
        } 
      } 
    } 
 
    // 格式化 patchFlag 
    if (patchFlag !== 0) { 
        vnodePatchFlag = String(patchFlag) 
    } 
 
    node.codegenNode = createVNodeCall( 
      context, 
      vnodeTag, 
      vnodeProps, 
      vnodeChildren, 
      vnodePatchFlag 
    ) 
  } 
} 

buildProps 會對節(jié)點的屬性進行一次遍歷，由于內(nèi)部源碼涉及很多其他的細節(jié)，這里的代碼是經(jīng)過簡化之后的，只保留了 patchFlag 相關(guān)的邏輯。

export function buildProps( 
  node: ElementNode, 
  context: TransformContext, 
  props: ElementNode['props'] = node.props 
) { 
  let patchFlag = 0 
  for (let i = 0; i < props.length; i++) { 
    const prop = props[i] 
    const [key, name] = prop.name.split(':') 
    if (key === 'v-bind' || key === '') { 
      if (name === 'class') { 
       // 如果包含 :class 屬性，patchFlag | CLASS 
        patchFlag |= PatchFlags.CLASS 
      } else if (name === 'style') { 
       // 如果包含 :style 屬性，patchFlag | STYLE 
        patchFlag |= PatchFlags.STYLE 
      } 
    } 
  } 
 
  return { 
    patchFlag 
  } 
} 

上面的代碼只展示了三種 patchFlag 的類型：

• 節(jié)點只有一個文本子節(jié)點，且該文本包含動態(tài)的數(shù)據(jù)(TEXT = 1)

<p>name: {{name}}</p> 

• 節(jié)點包含可變的 class 屬性(CLASS = 1 << 1)

<div :class="{ active: isActive }"></div> 

節(jié)點包含可變的 style 屬性(STYLE = 1 << 2)

<div :style="{ color: color }"></div> 

可以看到 PatchFlags 都是數(shù)字 1 經(jīng)過 左移操作符 計算得到的。

export const enum PatchFlags { 
  TEXT = 1,             // 1, 二進制 0000 0001 
  CLASS = 1 << 1,       // 2, 二進制 0000 0010 
  STYLE = 1 << 2,       // 4, 二進制 0000 0100 
  PROPS = 1 << 3,       // 8, 二進制 0000 1000 
  ... 
} 

從上面的代碼能看出來，patchFlag 的初始值為 0，每次對 patchFlag 都是執(zhí)行 | (或)操作。如果當(dāng)前節(jié)點是一個只有動態(tài)文本子節(jié)點且同時具有動態(tài) style 屬性，最后得到的 patchFlag 為 5(二進制：0000 0101)。

<p :style="{ color: color }">name: {{name}}</p> 

我們將上面的代碼放到 Vue3 中運行：

const app = Vue.createApp({ 
  data() { 
    return { 
      color: 'red', 
      name: 'shenfq' 
    } 
  }, 
  template: `<div> 
   <p :style="{ color: color }">name: {{name}}</p> 
  </div>` 
}) 
 
app.mount('#app') 

最后生成的 render 方法如下，和我們之前的描述基本一致。

function render() {}

render 優(yōu)化

Vue3 在虛擬 DOM Diff 時，會取出 patchFlag 和需要進行的 diff 類型進行 &(與)操作，如果結(jié)果為 true 才進入對應(yīng)的 diff。

patchFlag 判斷

還是拿之前的模板舉例：

<p :style="{ color: color }">name: {{name}}</p> 

如果此時的 name 發(fā)生了修改，p 節(jié)點進入了 diff 階段，此時會將判斷 patchFlag & PatchFlags.TEXT ，這個時候結(jié)果為真，表明 p 節(jié)點存在文本修改的情況。

patchFlag

patchFlag = 5 
patchFlag & PatchFlags.TEXT 
// 或運算：只有對應(yīng)的兩個二進位都為1時，結(jié)果位才為1。 
// 0000 0101 
// 0000 0001 
// ------------ 
// 0000 0001  =>  十進制 1 

if (patchFlag & PatchFlags.TEXT) { 
  if (oldNode.children !== newNode.children) { 
    // 修改文本 
    hostSetElementText(el, newNode.children) 
  } 
} 

但是進行 patchFlag & PatchFlags.CLASS 判斷時，由于節(jié)點并沒有動態(tài) Class，返回值為 0，所以就不會對該節(jié)點的 class 屬性進行 diff，以此來優(yōu)化性能。

patchFlag

patchFlag = 5 
patchFlag & PatchFlags.CLASS 
// 或運算：只有對應(yīng)的兩個二進位都為1時，結(jié)果位才為1。 
// 0000 0101 
// 0000 0010 
// ------------ 
// 0000 0000  =>  十進制 0 

總結(jié)

其實 Vue3 相關(guān)的性能優(yōu)化有很多，這里只單獨將 patchFlag 的十分之一的內(nèi)容拿出來講了，Vue3 還沒正式發(fā)布的時候就有看到說 Diff 過程會通過 patchFlag 來進行性能優(yōu)化，所以打算看看他的優(yōu)化邏輯，總的來說還是有所收獲。

本文轉(zhuǎn)載自微信公眾號「更了不起的前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系更了不起的前端公眾號。