Vue3源码分析组件挂载创建虚拟节点

mount(rootContainer) {
//判断当前返回的app是否已经调用过mount方法
if (!isMounted) {
//如果当前组件已经有了app
//实例则已经挂载了警告用户
if (rootContainer.__vue_app__) {
console.warn(
`There is already an app instance mounted on the host container.\n` +
` If you want to mount another app on the same host container,` +
` you need to unmount the previous app by calling \`app.unmount()\` first.`
);
}
//创建组件的VNode
const vNode = createVNode(rootComponent);
//刚才调用createApp创建的上下文
vNode.appContext = context;
render(vNode, rootContainer); //渲染虚拟DOM
//标记已经挂载了
isMounted = true;
//建立app与DOM的关联
app._container = rootContainer;
rootContainer.__vue_app__ = app;
//建立app与组件的关联
app._instance = vNode.component;
}
//已经调用过mount方法 警告用户
else {
console.warn(
`App has already been mounted.\n` +
`If you want to remount the same app, move your app creation logic ` +
`into a factory function and create fresh app instances for each ` +
`mount - e.g. \`const createMyApp = () => createApp(App)\``
);
}
}

export const ShapeFlags = {
ELEMENT: 1, //HTML SVG 或普通DOM元素
FUNCTIONAL_COMPONENT: 2, //函数式组件
STATEFUL_COMPONENT: 4, //有状态组件
COMPONENT: 6, //2,4的综合表示所有组件
TEXT_CHILDREN: 8, //子节点为纯文本
ARRAY_CHILDREN: 16, //子节点是数组
SLOTS_CHILDREN: 32, //子节点包含插槽
TELEPORT: 64, //Teleport
SUSPENSE: 128, //suspense
};

function createVNode(
type,//编译后的.vue文件形成的对象
//<Comp hello="h"></Comp>
//给组件传递的props
props = null,
children = null,//子组件
patchFlag = 0,//patch的类型
dynamicProps = null,//动态的props
isBlockNode = false//是否是block节点
) {
//通过__vccOpts判断是否是class组件
if (isClassComponent(type)) {
type = type.__vccOpts;
}
//将非字符串的class转化为字符串
//将代理过的style浅克隆在转为标准化
if (props) {
//对于代理过的对象,我们需要克隆来使用他们
//因为直接修改会导致触发响应式
props = guardReactiveProps(props);
let { class: klass, style } = props;
if (klass && !shared.isString(klass)) {
props.class = shared.normalizeClass(klass);
}
if (shared.isObject(style)) {
if (reactivity.isProxy(style) && !shared.isArray(style)) {
style = shared.extend({}, style);
}
props.style = shared.normalizeStyle(style);
}
}
//生成当前type的类型
let shapeFlag = 0;
/*
这部分我修改了源码,便于读者理解
suspense teleport放到前面是因为
他们本身就是一个对象,如果放到后面
会导致先中标isObject那么shapeFlag
的赋值会出错。
判断当前type的类型,赋值给shapeFlag
后续就可以通过shapeFlag来判断当前虚拟
节点的类型。
*/
if (isString(type)) {
//div span p等是ELEMENT
shapeFlag = ShapeFlags.ELEMENT;
} else if (isSuspense(type)) {
shapeFlag = ShapeFlags.SUSPENSE;
} else if (isTeleport(type)) {
shapeFlag = ShapeFlags.TELEPORT;
} else if (isObject(type)) {
//对象则是有状态组件
shapeFlag = ShapeFlags.STATEFUL_COMPONENT;
} else if (isFunction(type)) {
//如果是函数代表是无状态组件
shapeFlag = ShapeFlags.FUNCTIONAL_COMPONENT;
}
//调用更基层的方法处理
return createBaseVNode(
type,
props,
children,
patchFlag,
dynamicProps,
shapeFlag,
isBlockNode,
true
);
}

<template>
<div :class="{hello:true}"
:style="[{color:'red'},'background:red']">
</div>
</template>
//编译后
const _hoisted_1 = {
class:_normalizeClass({hello:true}),
style:_normalizeStyle([{color:'red'},'background:red'])
}
function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("div", _hoisted_1))
}

//{hello:true,yes:false}=>"hello"
function normalizeClass(value) {
let res = "";
if (isString(value)) {
res = value;
} else if (isArray(value)) {
for (let i = 0; i < value.length; i++) {
const normalized = normalizeClass(value[i]);
if (normalized) {
res += normalized + " ";
}
}
} else if (isObject(value)) {
for (const name in value) {
if (value[name]) {
res += name + " ";
}
}
}
return res.trim();
}

//[{backgroundColor:'red',"color:red;"}]=>
//{backgroundColor:'red',color:'red'}
export function normalizeStyle(value) {
if (isArray(value)) {
const res = {};
for (let i = 0; i < value.length; i++) {
const item = value[i];
const normalized = isString(item)
? parseStringStyle(item)
: normalizeStyle(item);
if (normalized) {
for (const key in normalized) {
res[key] = normalized[key];
}
}
}
return res;
} else if (isString(value)) {
return value;
} else if (isObject(value)) {
return value;
}
}

const isSuspense = type => type.__isSuspense;
const isTeleport = type => type.__isTeleport;

function createBaseVNode(
type,//创建的虚拟节点的类型
props = null,//传递的props
children = null,//子节点
patchFlag = 0,//patch类型
dynamicProps = null,//动态props
shapeFlag = type === Fragment ? 0 : 1,//当前虚拟节点的类型
isBlockNode = false,//是否是block
needFullChildrenNormalization = false//是否需要标准化children
) {
const vnode = {
__v_isVNode: true, //这是一个vnode
__v_skip: true, //不进行响应式代理
type, //.vue文件编译后的对象
props, //组件收到的props
key: props && normalizeKey(props), //组件key
ref: props && normalizeRef(props), //收集到的ref
scopeId: getCurrentScopeId(),//当前作用域ID
slotScopeIds: null, //插槽ID
children, //child组件
component: null, //组件实例
suspense: null,//存放suspense
ssContent: null,//存放suspense的default的虚拟节点
ssFallback: null,//存放suspense的fallback的虚拟节点
dirs: null, //解析到的自定义指令
transition: null,
el: null, //对应的真实DOM
anchor: null, //插入的锚点
target: null,//teleport的参数to指定的DOM
targetAnchor: null,//teleport插入的锚点
staticCount: 0,
shapeFlag, //表示当前vNode的类型
patchFlag, //path的模式
dynamicProps, //含有动态的props
dynamicChildren: null, //含有的动态children
appContext: null, //app上下文
};
//是否需要对children进行标准化
if (needFullChildrenNormalization) {
normalizeChildren(vnode, children);
//处理SUSPENSE逻辑
if (shapeFlag & ShapeFlags.SUSPENSE) {
//赋值ssContent=>default和ssFallback=>fallback
type.normalize(vnode);
}
}
//设置shapeFlags
else if (children) {
vnode.shapeFlag |= shared.isString(children)
? ShapeFlags.TEXT_CHILDREN
: ShapeFlags.ARRAY_CHILDREN;
}
//警告key不能为NaN
if (vnode.key !== vnode.key) {
warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type);
}
//判断是否加入dynamicChildren
if (
getBlockTreeEnabled() > 0 && //允许追踪
!isBlockNode && //当前不是block
getCurrentBlock() && //currentBlock存在
//不是静态节点,或者是组件
(vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
) {
//放入dynamicChildren
getCurrentBlock().push(vnode);
}
return vnode;
}

//为了便于阅读修改了源码
function normalizeKey(props){
const {key} = props
return key != null ? key : null
}

function normalizeRef(props) {
const { ref, ref_for, ref_key } = props;
if (ref != null) {
if (isString(ref) || isRef(ref) || isFunction(ref)) {
const res = {
//当前渲染的组件实例
i: getCurrentRenderingInstance(),
r: ref,
k: ref_key,
//<div v-for="a in c" ref="b"></div>
//同时使用了ref和v-for会标记
f: !!ref_for,
};
return res;
}
return ref
}
return null
}

<template>
<Comp>
<template v-slot:default>
<div></div>
</template>
<template v-slot:header></template>
</Comp>
</template>
//编译后
const _hoisted_1 = _createElementVNode("div", null, null, -1 /* HOISTED */)
function render(_ctx, _cache) {
const _component_Comp = _resolveComponent("Comp", true)
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(() => [
_hoisted_1
]),
header: _withCtx(() => []),
_: 1 /* STABLE */
}))
}

//STABLE
<Comp>
<template v-slot:default></template>
</Comp>
//DYNAMIC
<Comp>
<template v-slot:default v-if="a"></template>
</Comp>
//FORWORD
<Comp>
<slot name="default"></slot>
</Comp>

function normalizeChildren(vnode, children) {
let type = 0;//设置shapeFlag的初始值
const { shapeFlag } = vnode;
const currentRenderingInstance = getCurrentRenderingInstance();
if (children == null) {
children = null;
}
//如果children是数组,设置shapeFlags为ARRAY_CHILDREN
//用户可以写createVNode(Comp,null,[Vnode1,Vnode2])
//这样的形式,但是不推荐
else if (shared.isArray(children)) {
type = ShapeFlags.ARRAY_CHILDREN;
}
//处理"<Comp>插槽内容</Comp>"这种情况
//如果你一定要自己写render函数官方推荐
//对象形式,并返回一个函数的类型
//createVNode(Comp,null.{default:()=>Vnode})
else if (typeof children === "object") {
//处理TELEPORT情况或ELEMENT情况
if (shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.TELEPORT)) {
//忽略这里的代码...
}
//这里对vnode打上slot的标识
else {
type = ShapeFlags.SLOTS_CHILDREN;
//获取当前slot的slotFlag
const slotFlag = children._;
if (!slotFlag && !(InternalObjectKey in children)) {
children._ctx = currentRenderingInstance;
}
//在组件中引用了当前slot 例如:<Comp><slot></slot></Comp>
//这里的slot是当前组件实例传递的插槽就会被标记为FORWARDED
else if (slotFlag === SlotFlags.FORWARDED && currentRenderingInstance) {
//这里是引用当前实例传递的slot所以传递给children的slot类型
//依然延续当前实例传递的slot
if (currentRenderingInstance.slots._ === SlotFlags.STABLE) {
children._ = SlotFlags.STABLE;
} else {
children._ = SlotFlags.DYNAMIC;
//添加DYNAMIC_SLOTS
vnode.patchFlag |= PatchFlags.DYNAMIC_SLOTS;
}
}
}
}
//兼容函数写法
/**
* createVnode(Comp,null,()=>h())
* children为作为default
*/
else if (shared.isFunction(children)) {
//重新包装children
children = { default: children, _ctx: currentRenderingInstance };
type = ShapeFlags.SLOTS_CHILDREN;
} else {
children = String(children);
//强制让teleport children变为数组为了让他可以在任意处移动
if (shapeFlag & ShapeFlags.TELEPORT) {
type = ShapeFlags.ARRAY_CHILDREN;
children = [createTextVNode(children)];
}
//child为text
else {
type = ShapeFlags.TEXT_CHILDREN;
}
}
//挂载children、shapeFlag到vnode上
vnode.children = children;
vnode.shapeFlag |= type;
}

// Comment = Symbol('comment')
function createCommentVNode(text = "", asBlock = false) {
return asBlock
? (openBlock(), createBlock(Comment, null, text))
: createVNode(Comment, null, text);
}

// Text = Symbol('text')
function createTextVNode(text = " ", flag = 0) {
return createVNode(Text, null, text, flag);
}

//Static = Symbol('static')
function createStaticVNode(content, numberOfNodes) {
const vnode = createVNode(Static, null, content);
vnode.staticCount = numberOfNodes;
return vnode;
}

const render = (vnode, container) => {
if (vnode == null) {
//已经存在了 则卸载
if (container._vnode) {
unmount(container._vnode, null, null, true);
}
} else {
//挂载元素
patch(container._vnode || null, vnode, container, null, null, null);
}
flushPreFlushCbs();
flushPostFlushCbs();
//对于挂载过的container设置_vnode
container._vnode = vnode;
};

  const PatchFlags = {
DEV_ROOT_FRAGMENT: 2048,
//动态插槽
DYNAMIC_SLOTS: 1024,
//不带key的fragment
UNKEYED_FRAGMENT: 256,
//带key的fragment
KEYED_FRAGMENT: 128,
//稳定的fragment
STABLE_FRAGMENT: 64,
//带有监听事件的节点
HYDRATE_EVENTS: 32,
FULL_PROPS: 16, //具有动态:key,key改变需要全量比较
PROPS: 8, //动态属性但不包含style class属性
STYLE: 4, //动态的style
CLASS: 2, //动态的class
TEXT: 1, //动态的文本
HOISTED: -1, //静态节点
BAIL: -2, //表示diff应该结束
};

const patch = (
beforeVNode,//之前的Vnode
currentVNode,//当前的Vnode
container,//挂载的容器DOM
anchor = null,//挂载的锚点
parentComponent = null,//父组件
parentSuspense = null,//父suspense
isSVG = false,//是否是SVG
slotScopeIds = null,//当前的插槽作用域ID
//是否开启优化
optimized = !!currentVNode.dynamicChildren
) => {
//两个VNode相等 不做处理
if (beforeVNode === currentVNode) {
return null;
}
//如果不是同一个节点,卸载
if (beforeVNode && !isSameVNodeType(beforeVNode, currentVNode)) {
anchor = getNextHostNode(beforeVNode);
unmount(beforeVNode, parentComponent, parentSuspense, true);
beforeVNode = null;
}
if (currentVNode.patchFlag === PatchFlags.BAIL) {
optimized = false;
currentVNode.dynamicChildren = null;
}
const { type, ref, shapeFlag } = currentVNode;
switch (type) {
case Text:
//处理Text
break;
case Comment:
//处理注释节点
break;
case Static:
//处理静态节点
break;
case Fragment:
//处理Fragment节点
break;
default:
if (shapeFlag & ShapeFlags) {
//处理Element类型
} else if (shapeFlag & 6) {
//处理组件类型
processComponent(
beforeVNode,
currentVNode,
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
slotScopeIds,
optimized
);
} else if (shapeFlag & ShapeFlags.TELEPORT) {
//处理Teleport
} else if (shapeFlag & ShapeFlags.SUSPENSE) {
//处理Suspense
}
//都不匹配报错
else {
console.warn("Invalid VNode type:", type, `(${typeof type})`);
}
}
//设置setupState和refs中的ref
if (ref != null && parentComponent) {
setRef(
ref,
beforeVNode && beforeVNode.ref,
parentSuspense,
currentVNode || beforeVNode,
!currentVNode
);
}
};

function isSameVNodeType(beforeVNode,currentVNode){
return (
beforeVNode.type === currentVNode.type &&
beforeVNode.key === currentVNode.key
)
}

const getNextHostNode = (vnode) => {
//如果当前虚拟节点类型是组件,组件没有真实DOM
//找到subTree(render返回的节点)
if (vnode.shapeFlag & ShapeFlags.COMPONENT) {
return getNextHostNode(vnode.component.subTree);
}
//调用suspense的next方法获取
if (vnode.shapeFlag & ShapeFlags.SUSPENSE) {
return vnode.suspense.next();
}
//获取当前节点的下一个兄弟节点
return hostNextSibling(vnode.anchor || vnode.el);
};
//runtime-dom传递的方法
const nextSibling = node => node.nextSibling,

function setRef(
rawRef,//当前的ref
oldRawRef,//之前的ref
parentSuspense,
vnode,
isUnmount = false
) {
//是数组,分别设置
if (shared.isArray(rawRef)) {
rawRef.forEach((r, i) =>
setRef(
r,
oldRawRef && (shared.isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
parentSuspense,
vnode,
isUnmount
)
);
return;
}
//1.如果当前节点是一个组件，那么传递给ref属性的将会是expose
//或者proxy
//2.如果不是组件那么refValue为当前节点的DOM
const refValue =
vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
? getExposeProxy(vnode.component) || vnode.component.proxy
: vnode.el;
//如果卸载了则value为null
const value = isUnmount ? null : refValue;
//i:instance r:ref k:ref_key f:ref_for
//当同时含有ref和for关键词的时候ref_for为true
//之前createVNode的时候调用了normalizeRef将
//ref设置为了一个包装后的对象。
const { i: owner, r: ref } = rawRef;
//警告
if (!owner) {
warn(
`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
`A vnode with ref must be created inside the render function.`
);
return;
}
const oldRef = oldRawRef && oldRawRef.r;
//获取当前实例的refs属性，初始化refs
const refs =
Object.keys(owner.refs).length === 0 ? (owner.refs = {}) : owner.refs;
//这里是setup函数调用的返回值
const setupState = owner.setupState;
/*
ref可以是一个字符串<div ref="a"></div>
ref可以是一个响应式ref对象<div :ref="a"></div>
ref还可以是一个函数<div :ref="f"></div>
setup(){
retunr {a:ref(null),f(refValue){}}
}
*/
//新旧ref不同，清除oldRef
if (oldRef != null && oldRef !== ref) {
//如果ref传递的字符串类型
//将当前实例的refs属性对应的oldRef设置为null
//清除setupState中的oldRef
if (shared.isString(oldRef)) {
refs[oldRef] = null;
if (shared.hasOwn(setupState, oldRef)) {
setupState[oldRef] = null;
}
}
//如果是响应式的ref,清空value
else if (reactivity.isRef(oldRef)) {
oldRef.value = null;
}
}
//如果ref是一个函数(动态ref)
//<div :ref="(el,refs)=>{}"></div>
//调用这个函数传递value和refs
if (shared.isFunction(ref)) {
//vue的错误处理函数,包裹了try catch
//错误监听就是依靠这个函数，不详细展开
//简单理解为ref.call(owner,value,refs)
callWithErrorHandling(ref, owner, 12, [value, refs]);
} else {
//判断ref类型,因为字符串ref和响应式ref处理不同
const _isString = shared.isString(ref);
const _isRef = reactivity.isRef(ref);
if (_isString || _isRef) {
//因为篇幅太长,放到下面讲解,此处省略deSet函数实现
const doSet = function(){}
//放入Vue调度的后置队列，在DOM更新后再设置ref
if (value) {
doSet.id = -1;
queuePostRenderEffect(doSet, parentSuspense);
} else {
doSet();
}
} else {
warn("Invalid template ref type:", ref, `(${typeof ref})`);
}
}
}

const doSet = () => {
//<div v-for="a in b" :ref="c"></div>
if (rawRef.f) {
const existing = _isString ? refs[ref] : ref.value;
//已经卸载了 要移除
if (isUnmount) {
shared.isArray(existing) && shared.remove(existing, refValue);
} else {
//不是数组,包装成数组,方便后续push
if (!shared.isArray(existing)) {
if (_isString) {
refs[ref] = [refValue];
//同时需要修改setupState中的ref
if (shared.hasOwn(setupState, ref)) {
setupState[ref] = refs[ref];
}
}
//如果是响应式的ref，修改value
else {
ref.value = [refValue];
}
}
//已经存在了push
else if (!existing.includes(refValue)) {
existing.push(refValue);
}
}
}
//<div ref="a"></div>
else if (_isString) {
refs[ref] = value;
if (shared.hasOwn(setupState, ref)) {
setupState[ref] = value;
}
}
//<div :ref="a"></div>
else if (_isRef) {
ref.value = value;
//设置ref_key为value
if (rawRef.k) refs[rawRef.k] = value;
} else {
warn("Invalid template ref type:", ref, `(${typeof ref})`);
}
};

//处理Component类型的元素
const processComponent = (
beforeVNode, //之前的Vnode 第一次挂载为null
currentVNode, //当前的Vnode
container, //挂载的容器
anchor,//插入的锚点
parentComponent, //父组件
parentSuspense,//父suspense
isSVG,//是否是SVG
slotScopeIds,//插槽的作用域ID
optimized//是否开启优化
) => {
currentVNode.slotScopeIds = slotScopeIds;
//不存在beforeVNode挂载
if (beforeVNode == null) {
mountComponent(
currentVNode,
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
optimized
);
}
//更新
else {
updateComponent(beforeVNode, currentVNode, optimized);
}
};