Vue编译器optimize源码分析

/**
 * 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.
 */

function optimize(root, options) {
	if (!root) {
		return
	}
	isStaticKey = genStaticKeysCached(options.staticKeys || '');
	isPlatformReservedTag = options.isReservedTag || no;
	// first pass: mark all non-static nodes.
	markStatic$1(root);
	// second pass: mark static roots.
	markStaticRoots(root, false);
}

function markStatic$1(node) {
	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 (var i = 0, l = node.children.length; i < l; i++) {
			var child = node.children[i];
			markStatic$1(child);
			if (!child.static) {
				node.static = false;
			}
		}
		if (node.ifConditions) {
			for (var i$1 = 1, l$1 = node.ifConditions.length; i$1 < l$1; i$1++) {
				var block = node.ifConditions[i$1].block;
				markStatic$1(block);
				if (!block.static) {
					node.static = false;
				}
			}
		}
	}
}

node.static = isStatic(node);

在这给元素描述对象(AST) 扩展了static属性，通过isStatic方法调用后返回值，确认哪些节点是静态的，哪些是动态的。

function isStatic(node) {
	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)
	))
}

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)
))

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 (var i = 0, l = node.children.length; i < l; i++) {
		var child = node.children[i];
		markStatic$1(child);
		if (!child.static) {
			node.static = false;
		}
	}
	if (node.ifConditions) {
		for (var i$1 = 1, l$1 = node.ifConditions.length; i$1 < l$1; i$1++) {
			var block = node.ifConditions[i$1].block;
			markStatic$1(block);
			if (!block.static) {
				node.static = false;
			}
		}
	}
}

// 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 (var i = 0, l = node.children.length; i < l; i++) {
	var child = node.children[i];
	markStatic$1(child);
	if (!child.static) {
		node.static = false;
	}
}

if (!child.static) {
     node.static = false;
}

function markStaticRoots(node, isInFor) {
	if (node.type === 1) {
		if (node.static || node.once) {
			node.staticInFor = isInFor;
		}
		//一个节点要成为根节点，那么要满足以下条件：
                //1、静态节点，并且有子节点
                //2、子节点不能仅为一个文本节点
		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 (var i = 0, l = node.children.length; i < l; i++) {
				markStaticRoots(node.children[i], isInFor || !!node.for);
			}
		}
		if (node.ifConditions) {
			for (var i$1 = 1, l$1 = node.ifConditions.length; i$1 < l$1; i$1++) {
				markStaticRoots(node.ifConditions[i$1].block, isInFor);
			}
		}
	}
}