日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出余干免費(fèi)做網(wǎng)站回饋大家。

編譯入口

了解過(guò) Vue3 的同學(xué)肯定知道 Vue3 引入了新的組合 Api，在組件 mount 階段會(huì)調(diào)用 setup 方法，之后會(huì)判斷 render 方法是否存在，如果不存在會(huì)調(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 中的代碼，之前的文章有講過(guò) Vue 分為完整版和 runtime 版本。如果使用 vue-loader 處理 .vue 文件，一般都會(huì)將 .vue 文件中的 template 直接處理成 render 方法。

 
 
 
 

  
  
  
  
//  需要編譯器
  
  
  
  
Vue.createApp({
  
  
  
  
  template: '
{{ hi }}
'
  
  
  
  
})
  
  
  
  

  
  
  
  
// 不需要
  
  
  
  
Vue.createApp({
  
  
  
  
  render() {
  
  
  
  
    return Vue.h('div', {}, this.hi)
  
  
  
  
  }
  
  
  
  
})
 
 
 
 

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

主流程

在完整版的 index.js 中，調(diào)用了 registerRuntimeCompiler 將 compile 進(jìn)行注入，接下來(lái)我們看看注入的 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 不是字符串
  
  
  
  
    // 則認(rèn)為是一個(gè) DOM 節(jié)點(diǎn)，獲取 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 方法的同時(shí)，將其放入緩存
  
  
  
  
  return (compileCache[key] = render)
  
  
  
  
}
  
  
  
  

  
  
  
  
// 注入 compile
  
  
  
  
registerRuntimeCompiler(compileToFunction)
 
 
 
 

在講 Vue2 模板編譯的時(shí)候已經(jīng)講過(guò)，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，標(biāo)記靜態(tài)節(jié)點(diǎn)
  
  
  
  
  transform(ast, {
  
  
  
  
    ...options,
  
  
  
  
    nodeTransforms: [
  
  
  
  
      transformIf,
  
  
  
  
      transformFor,
  
  
  
  
      transformText,
  
  
  
  
      transformElement,
  
  
  
  
      // ... 省略了部分 transform
  
  
  
  
    ],
  
  
  
  
    directiveTransforms: {
  
  
  
  
      on: transformOn,
  
  
  
  
      bind: transformBind,
  
  
  
  
      model: transformModel
  
  
  
  
    }
  
  
  
  
  })
  
  
  
  
  // 將 ast 轉(zhuǎn)化為可執(zhí)行代碼
  
  
  
  
  return generate(ast, options)
  
  
  
  
}
 
 
 
 

計(jì)算 PatchFlag

這里大致的邏輯與之前的并沒有多大的差異，主要是 optimize 方法變成了 transform 方法，而且默認(rèn)會(huì)對(duì)一些模板語(yǔ)法進(jìn)行 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 會(huì)返回一個(gè)退出函數(shù)，在處理完所有的子節(jié)點(diǎn)后再執(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]()
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

我們重點(diǎn)看一下 transformElement 的邏輯：

 
 
 
 

  
  
  
  
// packages/compiler-core/src/transforms/transformElement.ts
  
  
  
  
export const transformElement: NodeTransform = (node, context) => {
  
  
  
  
  // transformElement 沒有執(zhí)行任何邏輯，而是直接返回了一個(gè)退出函數(shù)
  
  
  
  
  // 說(shuō)明 transformElement 需要等所有的子節(jié)點(diǎn)處理完后才執(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
  
  
  
  
    // 檢測(cè)節(jié)點(diǎn)屬性
  
  
  
  
    if (props.length > 0) {
  
  
  
  
      // 檢測(cè)節(jié)點(diǎn)屬性的動(dòng)態(tài)部分
  
  
  
  
      const propsBuildResult = buildProps(node, context)
  
  
  
  
      vnodeProps = propsBuildResult.props
  
  
  
  
      patchFlag = propsBuildResult.patchFlag
  
  
  
  
    }
  
  
  
  

  
  
  
  
    // 檢測(cè)子節(jié)點(diǎn)
  
  
  
  
    if (node.children.length > 0) {
  
  
  
  
      if (node.children.length === 1) {
  
  
  
  
        const child = node.children[0]
  
  
  
  
        // 檢測(cè)子節(jié)點(diǎn)是否為動(dòng)態(tài)文本
  
  
  
  
        if (!getStaticType(child)) {
  
  
  
  
          patchFlag |= PatchFlags.TEXT
  
  
  
  
        }
  
  
  
  
      }
  
  
  
  
    }
  
  
  
  

  
  
  
  
    // 格式化 patchFlag
  
  
  
  
    if (patchFlag !== 0) {
  
  
  
  
        vnodePatchFlag = String(patchFlag)
  
  
  
  
    }
  
  
  
  

  
  
  
  
    node.codegenNode = createVNodeCall(
  
  
  
  
      context,
  
  
  
  
      vnodeTag,
  
  
  
  
      vnodeProps,
  
  
  
  
      vnodeChildren,
  
  
  
  
      vnodePatchFlag
  
  
  
  
    )
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

buildProps 會(huì)對(duì)節(jié)點(diǎn)的屬性進(jìn)行一次遍歷，由于內(nèi)部源碼涉及很多其他的細(xì)節(jié)，這里的代碼是經(jīng)過(guò)簡(jiǎn)化之后的，只保留了 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é)點(diǎn)只有一個(gè)文本子節(jié)點(diǎn)，且該文本包含動(dòng)態(tài)的數(shù)據(jù)(TEXT = 1)

 
 
 
 

  
  
  
  
name: {{name}}
 
 
 
 

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