大家好,我是欧阳!
本文约2220+
字,整篇阅读大约需要12分钟。
在之前的 面试官:来说说vue3是怎么处理内置的v-for、v-model等指令? 文章中讲了transform
阶段处理完v-for、v-model等指令后,会生成一棵javascript AST抽象语法树。这篇文章我们来接着讲generate
阶段是如何根据这棵javascript AST抽象语法树生成render函数字符串的,本文中使用的vue版本为3.4.19
。
还是一样的套路,我们通过debug一个demo来搞清楚render函数字符串是如何生成的。demo代码如下:
上面这个demo很简单,使用p标签渲染一个msg响应式变量,变量的值为"hello world"。我们在浏览器中来看看这个demo生成的render函数是什么样的,代码如下:
上面的render函数中使用了两个函数:openBlock
和createElementBlock
。在之前的 vue3早已具备抛弃虚拟DOM的能力了文章中我们已经讲过了这两个函数:
openBlock
的作用为初始化一个全局变量currentBlock
数组,用于收集dom树中的所有动态节点。createElementBlock
的作用为生成根节点p标签的虚拟DOM,然后将收集到的动态节点数组currentBlock
塞到根节点p标签的dynamicChildren
属性上。render函数的生成其实很简单,经过transform
阶段处理后会生成一棵javascript AST抽象语法树
,这棵树的结构和要生成的render函数结构是一模一样的。所以在generate
函数中只需要递归遍历这棵树,进行字符串拼接就可以生成render函数啦!
generate
函数首先给generate
函数打个断点,generate
函数在node_modules/@vue/compiler-core/dist/compiler-core.cjs.js文件中。
然后启动一个debug终端,在终端中执行yarn dev
(这里是以vite举例)。在浏览器中访问 http://localhost:5173/ ,此时断点就会走到generate
函数中了。在我们这个场景中简化后的generate
函数是下面这样的:
generate
中主要分为四部分:
context
上下文对象。genModulePreamble
函数生成:import { xxx } from "vue";
context
上下文对象context
上下文对象是执行createCodegenContext
函数生成的,将断点走进createCodegenContext
函数。简化后的代码如下:
为了代码具有较强的可读性,我们一般都会使用换行和缩进。context
上下文中的这些属性和方法作用就是为了生成具有较强可读性的render函数。
code
属性:当前生成的render函数字符串。indentLevel
属性:当前的缩进级别,每个级别对应两个空格的缩进。helper
方法:返回render函数中使用到的vue包中export导出的函数名称,比如返回openBlock
、createElementBlock
等函数push
方法:向当前的render函数字符串后插入字符串code。indent
方法:插入换行符,并且增加一个缩进。deindent
方法:减少一个缩进,或者插入一个换行符并且减少一个缩进。newline
方法:插入换行符。import {xxx} from "vue"
我们接着来看generate
函数中的第二部分,生成import {xxx} from "vue"
。将断点走进genModulePreamble
函数,在我们这个场景中简化后的genModulePreamble
函数代码如下:
其中的ast.helpers
是在transform
阶段收集的需要从vue中import导入的函数,无需将vue中所有的函数都import导入。在debug终端看看helpers
数组中的值如下图:
从上图中可以看到需要从vue中import导入toDisplayString
、openBlock
、createElementBlock
这三个函数。
在执行push
方法之前我们先来看看此时的render函数字符串是什么样的,如下图:
从上图中可以看到此时生成的render函数字符串还是一个空字符串,执行完push方法后,我们来看看此时的render函数字符串是什么样的,如下图:
从上图中可以看到此时的render函数中已经有了import {xxx} from "vue"
了。
这里执行的genHoists
函数就是前面 搞懂 Vue 3 编译优化:静态提升的秘密文章中讲过的静态提升的入口。
执行完genModulePreamble
函数后,已经生成了一条import {xxx} from "vue"
了。我们接着来看generate
函数中render函数的函数名称和参数是如何生成的,代码如下:
上面的代码很简单,都是执行push
方法向render函数中添加code字符串,其中args
数组就是render函数中的参数。我们在来看看执行完上面这块代码后的render函数字符串是什么样的,如下图:
从上图中可以看到此时已经生成了render函数中的函数名称和参数了。
接着来看generate
函数中最后一块代码,如下:
首先调用indent
方法插入一个换行符并且增加一个缩进,然后执行push
方法添加一个return
字符串。
接着以根节点的codegenNode
属性为参数执行genNode
函数生成return中的内容,在我们这个场景中genNode
函数简化后的代码如下:
这里涉及到SIMPLE_EXPRESSION
、INTERPOLATION
和VNODE_CALL
三种AST抽象语法树node节点类型:
INTERPOLATION
:表示当前节点是双大括号节点,我们这个demo中就是:{{msg}}
这个文本节点。SIMPLE_EXPRESSION
:表示当前节点是简单表达式节点,在我们这个demo中就是双大括号节点{{msg}}
中的更里层节点msg
VNODE_CALL
:表示当前节点是虚拟节点,比如我们这里第一次调用genNode
函数传入的ast.codegenNode
(根节点的codegenNode
属性)就是虚拟节点。genVNodeCall
函数由于当前节点是虚拟节点,第一次进入genNode
函数时会执行genVNodeCall
函数。在我们这个场景中简化后的genVNodeCall
函数代码如下:
首先判断当前节点是不是block节点,由于此时的node为根节点,所以isBlock
为true。将断点走进helper
方法,我们来看看helper(OPEN_BLOCK)
返回值是什么。helper
方法的代码如下:
helper
方法中的代码很简单,这里的helper(OPEN_BLOCK)
返回的就是_openBlock
。
将断点走到第一个push
方法,代码如下:
执行完这个push
方法后在debug终端看看此时的render函数字符串是什么样的,如下图:
从上图中可以看到,此时render函数中增加了一个_openBlock
函数的调用。
将断点走到第二个push
方法,代码如下:
同理helper(callHelper)
方法返回的是_createElementBlock
,执行完这个push
方法后在debug终端看看此时的render函数字符串是什么样的,如下图:
从上图中可以看到,此时render函数中增加了一个_createElementBlock
函数的调用。
继续将断点走到genNodeList
部分,代码如下:
其中的genNullableArgs
函数功能很简单,将参数中的undefined
转换成null
。比如此时的props
就是undefined
,经过genNullableArgs
函数处理后传给genNodeList
函数的props
就是null
。
genNodeList
函数继续将断点走进genNodeList
函数,在我们这个场景中简化后的代码如下:
我们先来看看此时的nodes
参数,如下图:
这里的nodes
就是调用genNodeList
函数时传的数组:[tag, props, children, patchFlag, dynamicProps]
,只是将数组中的undefined
转换成了null
。
nodes
数组中的第一项为字符串p,表示当前节点是p标签。在讲genNodeList
函数之前,我们先来看一下如何使用h
函数生成一个<p>{{ msg }}</p>
标签的虚拟DOM节点。根据vue官网的介绍,h
函数定义如下:
h
函数接收的第一个参数是标签名称或者一个组件,第二个参数是props对象或者null,第三个参数是子节点。
所以我们要使用h
函数生成demo中的p标签虚拟DOM节点代码如下:
h
函数生成虚拟DOM实际就是调用的createBaseVNode
函数,而我们这里的createElementBlock
函数生成虚拟DOM也是调用的createBaseVNode
函数。两者的区别是createElementBlock
函数多接收一些参数,比如patchFlag
和dynamicProps
。
现在我想你应该已经反应过来了,为什么调用genNodeList
函数时传入的第一个参数nodes
为:[tag, props, children, patchFlag, dynamicProps]
。这个数组的顺序就是调用createElementBlock
函数时传入的参数顺序。
所以在genNodeList
中会遍历nodes
数组生成调用createElementBlock
函数需要传入的参数。
先来看第一个参数tag
,这里tag
的值为字符串"p"。所以在for循环中会执行push(node)
,生成调用createElementBlock
函数的第一个参数"p"。在debug终端看看此时的render函数,如下图:
从上图中可以看到createElementBlock
函数的第一个参数"p"
接着来看nodes
数组中的第二个参数:props
,由于p标签中没有props
属性。所以第二个参数props
的值为字符串"null",在for循环中同样会执行push(node)
,生成调用createElementBlock
函数的第二个参数"null"。在debug终端看看此时的render函数,如下图:
从上图中可以看到createElementBlock
函数的第二个参数null
接着来看nodes
数组中的第三个参数:children
,由于children
是一个对象,所以以当前children节点作为参数执行genNode
函数。
这个genNode
函数前面已经执行过一次了,当时是以根节点的codegenNode
属性作为参数执行的。回顾一下genNode
函数的代码,如下:
前面我们讲过了NodeTypes.INTERPOLATION
类型表示当前节点是双大括号节点,而我们这次执行genNode
函数传入的p标签children,刚好就是{{msg}}双大括号节点。所以代码会走到genInterpolation
函数中。
genInterpolation
函数将断点走进genInterpolation
函数中,genInterpolation
代码如下:
首先会执行push
方法向render函数中插入一个_toDisplayString
函数调用,在debug终端看看执行完这个push
方法后的render函数,如下图:
从上图中可以看到此时createElementBlock
函数的第三个参数只生成了一半,调用_toDisplayString
函数传入的参数还没生成。
接着会以node.content
作为参数执行genNode(node.content, context);
生成_toDisplayString
函数的参数,此时代码又走回了genNode
函数。
将断点再次走进genNode
函数,看看此时的node是什么样的,如下图:
从上图中可以看到此时的node节点是一个简单表达式节点,表达式为:$setup.msg
。所以代码会走进genExpression
函数。
genExpression
函数接着将断点走进genExpression
函数中,genExpression
函数中的代码如下:
由于当前的msg
变量是一个ref
响应式变量,所以isStatic
为false
。所以会执行push
方法,将$setup.msg
插入到render函数中。
执行完push
方法后,在debug终端看看此时的render函数字符串是什么样的,如下图:
从上图中可以看到此时的render函数基本已经生成了,剩下的就是调用push
方法生成各个函数的右括号")"和右花括号"}"。将断点逐层走出,直到generate
函数中。代码如下:
执行完最后一个 push
方法后,在debug终端看看此时的render函数字符串是什么样的,如下图:
从上图中可以看到此时的render函数终于生成啦!
这是我画的我们这个场景中generate
生成render函数的流程图:
genModulePreamble
函数生成:import { xxx } from "vue";
codegenNode
属性为参数调用genNode
函数生成render函数中return的内容。genVNodeCall
函数生成return _openBlock(), _createElementBlock(
和调用genNodeList
函数,生成createElementBlock
函数的参数。tag
标签名和props
,生成createElementBlock
函数的第一个和第二个参数。此时render函数return的内容为:return _openBlock(), _createElementBlock("p", null
{{msg}}
节点,再次调用genNode
函数。此时node节点类型为双大括号节点,调用genInterpolation
函数。genInterpolation
函数中会先调用push
方法,此时的render函数return的内容为:return _openBlock(), _createElementBlock("p", null, _toDisplayString(
。然后以node.content
为参数再次调用genNode
函数。