Vue3模板编译优化的示例分析

小编给大家分享一下Vue3模板编译优化的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联从2013年创立，先为芜湖等服务建站，芜湖等地企业，进行企业商务咨询服务。为芜湖企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

编译入口

了解过 Vue3 的同学肯定知道 Vue3 引入了新的组合 Api，在组件 mount 阶段会调用 setup 方法，之后会判断 render  方法是否存在，如果不存在会调用 compile 方法将 template 转化为 render。

// packages/runtime-core/src/renderer.ts const mountComponent = (initialVNode, container) => {   const instance = (     initialVNode.component = createComponentInstance(       // ...params     )   )   // 调用 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) {     // ...调用 setup   }   if (compile && Component.template && !Component.render) {    // 如果没有 render 方法     // 调用 compile 将 template 转为 render 方法     Component.render = compile(Component.template, {...})   } }

这部分都是 runtime-core 中的代码，之前的文章有讲过 Vue 分为完整版和 runtime 版本。如果使用 vue-loader 处理  .vue 文件，一般都会将 .vue 文件中的 template 直接处理成 render 方法。

//  需要编译器 Vue.createApp({   template: '
{{ hi }}
' })  // 不需要 Vue.createApp({   render() {     return Vue.h('div', {}, this.hi)   } })

完整版与 runtime 版的差异就是，完整版会引入 compile 方法，如果是 vue-cli 生成的项目就会抹去这部分代码，将 compile  过程都放到打包的阶段，以此优化性能。runtime-dom 中提供了 registerRuntimeCompiler 方法用于注入 compile  方法。

主流程

在完整版的 index.js 中，调用了 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 节点，获取 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 : ''   }    // 调用 compile 获取 render code   const { code } = compile(     template,     options   )    // 将 render code 转化为 function   const render = new Function(code)();   // 返回 render 方法的同时，将其放入缓存   return (compileCache[key] = render) }  // 注入 compile registerRuntimeCompiler(compileToFunction)

在讲 Vue2 模板编译的时候已经讲过，compile 方法主要分为三步，Vue3 的逻辑类似：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2. 模板编译，将模板代码转化为 AST;

3. 优化 AST，方便后续虚拟 DOM 更新;

4. 生成代码，将 AST 转化为可执行的代码;

// 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，转化为 ast   const ast = baseParse(template, options)   // 优化 ast，标记静态节点   transform(ast, {     ...options,     nodeTransforms: [       transformIf,       transformFor,       transformText,       transformElement,       // ... 省略了部分 transform     ],     directiveTransforms: {       on: transformOn,       bind: transformBind,       model: transformModel     }   })   // 将 ast 转化为可执行代码   return generate(ast, options) }

计算 PatchFlag

这里大致的逻辑与之前的并没有多大的差异，主要是 optimize 方法变成了 transform 方法，而且默认会对一些模板语法进行  transform。这些 transform 就是后续虚拟 DOM 优化的关键，我们先看看 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 会返回一个退出函数，在处理完所有的子节点后再执行     const onExit = nodeTransforms[i](node, context)     if (onExit) {       if (isArray(onExit)) {         exitFns.push(...onExit)       } else {         exitFns.push(onExit)       }     }   }   traverseChildren(node, context)   context.currentNode = node   // 执行所以 Transform 的退出函数   let i = exitFns.length   while (i--) {     exitFns[i]()   } }

我们重点看一下 transformElement 的逻辑：

// packages/compiler-core/src/transforms/transformElement.ts export const transformElement: NodeTransform = (node, context) => {   // transformElement 没有执行任何逻辑，而是直接返回了一个退出函数   // 说明 transformElement 需要等所有的子节点处理完后才执行   return function postTransformElement() {     const { tag, props } = node      let vnodeProps     let vnodePatchFlag     const vnodeTag = node.tagType === ElementTypes.COMPONENT       ? resolveComponentType(node, context)       : `"${tag}"`          let patchFlag = 0     // 检测节点属性     if (props.length > 0) {       // 检测节点属性的动态部分       const propsBuildResult = buildProps(node, context)       vnodeProps = propsBuildResult.props       patchFlag = propsBuildResult.patchFlag     }      // 检测子节点     if (node.children.length > 0) {       if (node.children.length === 1) {         const child = node.children[0]         // 检测子节点是否为动态文本         if (!getStaticType(child)) {           patchFlag |= PatchFlags.TEXT         }       }     }      // 格式化 patchFlag     if (patchFlag !== 0) {         vnodePatchFlag = String(patchFlag)     }      node.codegenNode = createVNodeCall(       context,       vnodeTag,       vnodeProps,       vnodeChildren,       vnodePatchFlag     )   } }

buildProps 会对节点的属性进行一次遍历，由于内部源码涉及很多其他的细节，这里的代码是经过简化之后的，只保留了 patchFlag  相关的逻辑。

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 的类型：

• 节点只有一个文本子节点，且该文本包含动态的数据(TEXT = 1)

name: {{name}}

• 节点包含可变的 class 属性(CLASS = 1 << 1)