本节主要参考这里
/**
* Goal of the optimizer: walk the generated template AST tree
* and detect sub-trees that are purely static, i.e. parts of
* the DOM that never needs to change.
*
* Once we detect these sub-trees, we can:
*
* 1. Hoist them into constants, so that we no longer need to
* create fresh nodes for them on each re-render;
* 2. Completely skip them in the patching process.
*/
export function optimize (root: ?ASTElement, options: CompilerOptions) {
if (!root) return
isStaticKey = genStaticKeysCached(options.staticKeys || '')
isPlatformReservedTag = options.isReservedTag || no
// first pass: mark all non-static nodes.
markStatic(root)
// second pass: mark static roots.
markStaticRoots(root, false)
}
function markStatic (node: ASTNode) {
node.static = isStatic(node)
if (node.type === 1) {
// do not make component slot content static. this avoids
// 1. components not able to mutate slot nodes
// 2. static slot content fails for hot-reloading
if (
!isPlatformReservedTag(node.tag) && node.tag !== 'slot' && node.attrsMap['inline-template'] == null) {
return
}
for (let i = 0, l = node.children.length; i < l; i++) {
const child = node.children[i]
markStatic(child)
if (!child.static) {
node.static = false
}
}
if (node.ifConditions) {
for (let i = 1, l = node.ifConditions.length; i < l; i++) {
const block = node.ifConditions[i].block
markStatic(block)
if (!block.static) {
node.static = false
}
}
}
}
}
如果这个节点是一个普通元素,则遍历它的所有 children
,递归执行 markStatic
。因为所有的 elseif
和 else
节点都不在 children
中, 如果节点的 ifConditions
不为空,则遍历 ifConditions
拿到所有条件中的 block
,也就是它们对应的 AST 节点,递归执行 markStatic
。在这些递归过程中,一旦子节点有不是 static
的情况,则它的父节点的 static
均变成 false。
isStatic
是对一个 AST 元素节点是否是静态的判断,
function isStatic (node: ASTNode): boolean {
if (node.type === 2) { // expression
return false
}
if (node.type === 3) { // text
return true
}
return !!(node.pre || (
!node.hasBindings && // no dynamic bindings
!node.if && !node.for && // not v-if or v-for or v-else
!isBuiltInTag(node.tag) && // not a built-in
isPlatformReservedTag(node.tag) && // not a component
!isDirectChildOfTemplateFor(node) &&
Object.keys(node).every(isStaticKey)
))
}
v-pre
指令,是静态,
hasBindings
是在上一小节中的processAttrs
中判断的,使用正则/^v-|^@|^:|^.|^#/
验证v-if
、v-for
slot
,component
v-for
的 template
标签的直接子节点,key
都满足静态 key (使用isStaticKey来判断) ``` // staticKeys: staticStyle、staticClass 在上一小节也会被添加 isStaticKey = genStaticKeysCached(options.staticKeys || '')function genStaticKeys (keys: string): Function { return makeMap( 'type,tag,attrsList,attrsMap,plain,parent,children,attrs,start,end,rawAttrsMap' + (keys ? ',' + keys : '') ) } ```
function markStaticRoots (node: ASTNode, isInFor: boolean) {
if (node.type === 1) {
if (node.static || node.once) {
node.staticInFor = isInFor
}
// For a node to qualify as a static root, it should have children that
// are not just static text. Otherwise the cost of hoisting out will
// outweigh the benefits and it's better off to just always render it fresh.
if (node.static && node.children.length && !(
node.children.length === 1 &&
node.children[0].type === 3
)) {
node.staticRoot = true
return
} else {
node.staticRoot = false
}
if (node.children) {
for (let i = 0, l = node.children.length; i < l; i++) {
markStaticRoots(node.children[i], isInFor || !!node.for)
}
}
if (node.ifConditions) {
for (let i = 1, l = node.ifConditions.length; i < l; i++) {
markStaticRoots(node.ifConditions[i].block, isInFor)
}
}
}
}
markStaticRoots
第二个参数是 isInFor
,对于已经是 static
的节点或者是 v-once
指令的节点,node.staticInFor = isInFor
。 接着就是对于 staticRoot
的判断逻辑,从注释中我们可以看到,对于有资格成为 staticRoot
的节点,除了本身是一个静态节点外,必须满足拥有 children
,并且 children
不能只是一个文本节点,不然的话把它标记成静态根节点的收益就很小了。
接下来和标记静态节点的逻辑一样,遍历 children
以及 ifConditions
,递归执行 markStaticRoots
。
深度遍历这个 AST 树,去检测它的每一棵子树是不是静态节点,如果是静态节点则它们生成 DOM 永远不需要改变,这对运行时对模板的更新起到极大的优化作用。