明天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差别，以及 VDOM 下 Diff 算法的优化。
编译入口
理解过 Vue3 的同学必定晓得 Vue3 引入了新的组合 Api，在组件 mount 阶段会调用 setup 办法，之后会判断 render 办法是否存在，如果不存在会调用 compile 办法将 template 转化为 render。
// packages/runtime-core/src/renderer.tsconst mountComponent = (initialVNode, container) => { const instance = ( initialVNode.component = createComponentInstance( // ...params ) ) // 调用 setup setupComponent(instance)}// packages/runtime-core/src/component.tslet compileexport 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: '<div>{{ hi }}</div>'})// 不须要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.tsimport { 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)}// 注入 compileregisterRuntimeCompiler(compileToFunction)在讲 Vue2 模板编译的时候曾经讲过，compile 办法次要分为三步，Vue3 的逻辑相似：
- 模板编译，将模板代码转化为 AST；
- 优化 AST，不便后续虚构 DOM 更新；
- 生成代码，将 AST 转化为可执行的代码；
参考vue实战视频解说：进入学习
// packages/compiler-dom/src/index.tsimport { baseCompile, baseParse } from '@vue/compiler-core'export function compile(template, options) { return baseCompile(template, options)}// packages/compiler-core/src/compile.tsimport { 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.tsexport 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.tsexport 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）
<p>name: {{name}}</p>- 节点蕴含可变的 class 属性（
CLASS = 1 << 1）
<div :class="{ active: isActive }"></div>- 节点蕴含可变的 style 属性（
STYLE = 1 << 2）
<div :style="{ color: color }"></div>能够看到 PatchFlags 都是数字 1 通过 左移操作符 计算失去的。
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 都是执行 | （或）操作。如果以后节点是一个只有动静文本子节点且同时具备动静 style 属性，最初失去的 patchFlag 为 5（二进制：0000 0101）。
<p :style="{ color: color }">name: {{name}}</p>patchFlag = 0patchFlag |= PatchFlags.STYLEpatchFlag |= PatchFlags.TEXT// 或运算：两个对应的二进制位中只有一个是1，后果对应位就是1。// 0000 0001// 0000 0100// ------------// 0000 0101 => 十进制 5咱们将下面的代码放到 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 办法如下，和咱们之前的形容基本一致。
render 优化
Vue3 在虚构 DOM Diff 时，会取出 patchFlag 和须要进行的 diff 类型进行 &（与）操作，如果后果为 true 才进入对应的 diff。
还是拿之前的模板举例：
<p :style="{ color: color }">name: {{name}}</p>如果此时的 name 产生了批改，p 节点进入了 diff 阶段，此时会将判断 patchFlag & PatchFlags.TEXT ，这个时候后果为真，表明 p 节点存在文本批改的状况。
patchFlag = 5patchFlag & PatchFlags.TEXT// 或运算：只有对应的两个二进位都为1时，后果位才为1。// 0000 0101// 0000 0001// ------------// 0000 0001 => 十进制 1if (patchFlag & PatchFlags.TEXT) { if (oldNode.children !== newNode.children) { // 批改文本 hostSetElementText(el, newNode.children) }}然而进行 patchFlag & PatchFlags.CLASS 判断时，因为节点并没有动静 Class，返回值为 0，所以就不会对该节点的 class 属性进行 diff，以此来优化性能。
patchFlag = 5patchFlag & PatchFlags.CLASS// 或运算：只有对应的两个二进位都为1时，后果位才为1。// 0000 0101// 0000 0010// ------------// 0000 0000 => 十进制 0总结
其实 Vue3 相干的性能优化有很多，这里只独自将 patchFlag 的十分之一的内容拿出来讲了，Vue3 还没正式公布的时候就有看到说 Diff 过程会通过 patchFlag 来进行性能优化，所以打算看看他的优化逻辑，总的来说还是有所播种。