前言
上一篇文章，我们提到packages中核心的源码主要分为三部分，接下来我们就开始阅读runtime部分的代码
createApp(App).mount('#app')
接下来我们就以入口文件中的这行代码开始来一步步深入
初始化
上一篇文章中我们提到vue主入口文件中，引入导出了runtime-dom和compiler，而createApp就是来自runtime-dom
// packages/runtime-dom/src/index.ts
export const createApp = ((...args) => {
const app = ensureRenderer().createApp(...args)
if (__DEV__) {
injectNativeTagCheck(app) // 在dev环境下，注册一个方法isNativeTag，挂载到app.config下面
}
const { mount } = app
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
// ...
}
return app
}) as CreateAppFunction
在该函数内部中通过调用ensureRenderer()和createApp(...args)创建了app实例并把实例返回出去，因此我们可以在app实例中安装插件，设置全局指令等等。这其中又是怎么实现的呢？
创建renderer
ensureRenderer()函数的用途是什么呢？
// packages/runtime-dom/src/index.ts
function ensureRenderer() {
return renderer || (renderer = createRenderer(rendererOptions))
}
我们可以看到调用该函数后返回一个renderer，若没有renderer则调用createRenderer来进行创建。
而这边的createRenderer则是来自runtime-core
// packages/runtime-core/src/index.ts
export function createRenderer<
HostNode = RendererNode,
HostElement = RendererElement
>(options: RendererOptions) {
return baseCreateRenderer(options)
}
该函数接收一个RendererOptions作为参数，其实际是调用了baseCreateRenderer并将options传入
// packages/runtime-core/src/renderer.ts
function baseCreateRenderer(
options: RendererOptions,
createHydrationFns?: typeof createHydrationFunctions
): any {
const {
insert: hostInsert,
remove: hostRemove,
patchProp: hostPatchProp,
forcePatchProp: hostForcePatchProp,
createElement: hostCreateElement,
createText: hostCreateText,
createComment: hostCreateComment,
setText: hostSetText,
setElementText: hostSetElementText,
parentNode: hostParentNode,
nextSibling: hostNextSibling,
setScopeId: hostSetScopeId = NOOP,
cloneNode: hostCloneNode,
insertStaticContent: hostInsertStaticContent
} = options
// 声明了许多操作函数，约2000行
return {
render,
hydrate,
createApp: createAppAPI(render, hydrate)
}
}
在调用完baseCreateRenderer后主要返回了三个函数：render,hydrate，createApp。
此时renderer便创建完成了。
这其中有一处需要留心，即传入的RendererOptions是什么？为什么在runtime-dom传入，又在runtime-core拆解。
// packages/runtime-dom/src/index.ts
const rendererOptions = extend({ patchProp, forcePatchProp }, nodeOps)
// packages/runtime-dom/src/nodeOps.ts
export const nodeOps: Omit, 'patchProp'> = {
insert: (child, parent, anchor) => {
parent.insertBefore(child, anchor || null)
},
remove: child => {
const parent = child.parentNode
if (parent) {
parent.removeChild(child)
}
},
// ...
}
是不是很熟悉，其实就是对于dom操作的封装。那为什么要在runtime-dom中传入，runtime-core拆解？
其实是因为在Vue3中runtime-core和runtime-dom的拆分，runtime-core不应该关心实际的操作，这样当新平台要接入时（比如weex）就可以只实现属于自己平台的nodeOps。
总结：创建renderer的函数调用顺序为
ensureRenderer()createRenderer()baseCreateRenderer()
创建app
当创建完renderer后返回了3个函数，我们可以看到其中createApp实际上是引用了createAppAPI(render, hydrate)，所以其实const app = ensureRenderer().createApp(...args)创建app实例时，调用的是createAppAPI的返回值（运用柯里化，返回的是一个函数）
// packages/runtime-core/src/apiCreateApp.ts
export function createAppContext(): AppContext {
return {
app: null as any, // 刚创建时为空
config: {
isNativeTag: NO,
performance: false,
globalProperties: {},
optionMergeStrategies: {},
isCustomElement: NO,
errorHandler: undefined,
warnHandler: undefined
},
mixins: [],
components: {},
directives: {},
provides: Object.create(null)
}
}
export function createAppAPI(
render: RootRenderFunction,
hydrate?: RootHydrateFunction
): CreateAppFunction {
return function createApp(rootComponent, rootProps = null) {
// 检验root props
if (rootProps != null && !isObject(rootProps)) {
__DEV__ && warn(`root props passed to app.mount() must be an object.`)
rootProps = null
}
const context = createAppContext(); // 创建context
const installedPlugins = new Set(); // 创建插件列表集合，储存已安装的插件
let isMounted = false;
const app: App = (context.app = {
_component: rootComponent as Component,
_props: rootProps,
_container: null,
_context: context,
version,
get config() {},
set config() {}
use() {},
mixin() {},
component() {},
mount() {}
// ...
})
return app // 返回创建的app实例
};
}
看完上面的代码后结果就很清楚了，当我们调用createApp时，返回的app上有着许多函数方法和属性，相信你对这些函数方法并不陌生，这些就是vue2.x中在Vue上的那些API：use、mixin、component，在vue3则是被挂载到了app实例上
需要注意的是：我们在应用中调用的createApp(App)，其中的APP就是第一个参数，作为根组件
mount
当创建完app实例后，现在让我们开始进行mount('#app')，让我们重新进入createApp
// packages/runtime-dom/src/index.ts
export const createApp = ((...args) => {
const app = ensureRenderer().createApp(...args)
if (__DEV__) {
injectNativeTagCheck(app)
}
const { mount } = app // 保存app实例上原本的mount
// 重写mount
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
const container = normalizeContainer(containerOrSelector) // 获取根元素容器
if (!container) return
const component = app._component // 获取根组件，即App
if (!isFunction(component) && !component.render && !component.template) {
component.template = container.innerHTML // 使用根元素来作为模板
}
// clear content before mounting
container.innerHTML = ''
const proxy = mount(container) // 调用实例中的mount方法
if (container instanceof Element) {
container.removeAttribute('v-cloak') // 删除v-cloak属性
container.setAttribute('data-v-app', '') // 添加data-v-app属性
}
return proxy
}
return app
}) as CreateAppFunction
我们可以看到在上面的代码中，在创建完app之后，先对app实例中的mount方法进行了保存，接着又对mount进行了重写。
重写的mount方法中，先是调用了normalizeContainer(containerOrSelector)来获取根元素容器，containerOrSelector即我们传入的#app
// packages/runtime-dom/src/index.ts
function normalizeContainer(
container: Element | ShadowRoot | string
): Element | null {
if (isString(container)) {
const res = document.querySelector(container) // 进行dom操作选中容器
if (__DEV__ && !res) {
// ...
}
return res
}
// ...
return container as any
}
在获取到根元素的容器之后，进行判断，将容器原本的html作为根组件的模板，然后清除了容器中原本的html
随后便开始调用app实例上原本的mount方法，正式进行挂载。
// packages/runtime-core/src/apiCreateApp.ts
mount(rootContainer: HostElement, isHydrate?: boolean): any {
if (!isMounted) {
// 1.创建vnode
const vnode = createVNode(
rootComponent as ConcreteComponent, // App组件
rootProps
)
vnode.appContext = context // 保存context在根节点上
// HMR root reload
if (__DEV__) {
// ...
}
if (isHydrate && hydrate) {
hydrate(vnode as VNode, rootContainer as any)
} else {
render(vnode, rootContainer) // 2.进入render，函数来源于runtime-core
}
isMounted = true // 修改状态
app._container = rootContainer
// for devtools and telemetry
;(rootContainer as any).__vue_app__ = app
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
devtoolsInitApp(app, version)
}
return vnode.component!.proxy // 返回vnode.component的代理
} else if (__DEV__) {
// ...
}
},
runtime-core中mount方法主要做了两件事：创建vnode和调用render进入渲染。这里我们先简略的介绍一下这两个函数的作用，后面我们将进行仔细的解析。
在创建vnode时调用了createVNode()，并将根组件作为参数传入。
在得到vnode之后又调用了render()开始进行渲染。
最后mount函数的返回值为vnode.component的代理。
createVNode
// packages/runtime-core/src/vnode.ts
export const createVNode = (__DEV__
? createVNodeWithArgsTransform
: _createVNode) as typeof _createVNode
// 实际调用
function _createVNode(
type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
props: (Data & VNodeProps) | null = null,
children: unknown = null,
patchFlag: number = 0, // patch flag默认为0
dynamicProps: string[] | null = null,
isBlockNode = false
): VNode {
// ...
// ...
// class & style normalization
// 处理props,标准化calss和style
if (props) {
// for reactive or proxy objects, we need to clone it to enable mutation.
if (isProxy(props) || InternalObjectKey in props) {
props = extend({}, props)
}
let { class: klass, style } = props
if (klass && !isString(klass)) {
props.class = normalizeClass(klass) // 标准化class
}
if (isObject(style)) {
// reactive state objects need to be cloned since they are likely to be
// mutated
if (isProxy(style) && !isArray(style)) {
style = extend({}, style)
}
props.style = normalizeStyle(style) // 标准化style
}
}
// 定义shapeFlag
// encode the vnode type information into a bitmap
const shapeFlag = isString(type)
? ShapeFlags.ELEMENT
: __FEATURE_SUSPENSE__ && isSuspense(type)
? ShapeFlags.SUSPENSE
: isTeleport(type)
? ShapeFlags.TELEPORT
: isObject(type)
? ShapeFlags.STATEFUL_COMPONENT // 根组件shapeFlag
: isFunction(type)
? ShapeFlags.FUNCTIONAL_COMPONENT
: 0
// ...
// 创建vnode对象
const vnode: VNode = {
__v_isVNode: true,
[ReactiveFlags.SKIP]: true,
type,
props,
key: props && normalizeKey(props),
ref: props && normalizeRef(props),
scopeId: currentScopeId,
children: null,
component: null,
suspense: null,
ssContent: null,
ssFallback: null,
dirs: null,
transition: null,
el: null,
anchor: null,
target: null,
targetAnchor: null,
staticCount: 0,
shapeFlag,
patchFlag,
dynamicProps,
dynamicChildren: null,
appContext: null
}
// ...
normalizeChildren(vnode, children) // 标准化子节点
// ...
return vnode // 返回创建完的vnode
}
可以看到createVNode主要做了四件事：
- 处理
props：标准化class和style，如果是响应式元素则会被克隆 - 定义
shapeFlag：shapeFlag用于对元素进行标记，比如文本、注释、组件等等。主要是为了在render的时候可以根据不同的元素类型来进行不同的patch操作。 - 创建
vnode对象 - 标准化子节点：把不同数据类型的 children 转成数组或者文本类型
shapeFlag的定义如下：
// packages/shared/src/shapeFlag.ts
export const enum ShapeFlags {
ELEMENT = 1, // 普通元素
FUNCTIONAL_COMPONENT = 1 << 1, // 函数组件
STATEFUL_COMPONENT = 1 << 2, // 动态绑定style的元素
TEXT_CHILDREN = 1 << 3, // 后代为文本元素
ARRAY_CHILDREN = 1 << 4, // 后代为列表元素
SLOTS_CHILDREN = 1 << 5, // 后代为插槽元素
TELEPORT = 1 << 6, // teleport组件
SUSPENSE = 1 << 7, // suspense组件
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, // keep alive 路由组件
COMPONENT_KEPT_ALIVE = 1 << 9, // keep alive组件
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT // 普通组件
}
render
当我们拥有这个vnode后，就开始进入渲染阶段了。render(vnode, rootContainer)，可以看到传入的参数为vnode以及根元素的容器，接下来让我们继续深入。
不知道你是否还记得，这个render函数是在调用createAPI时传入的第一个参数，因此这个函数来源于runtime-core中的baseCreateRenderer
// packages/runtime-core/src/renderer.ts
const render: RootRenderFunction = (vnode, container) => {
// (判断进行卸载还是渲染
if (vnode == null) {
if (container._vnode) {
unmount(container._vnode, null, null, true) // 卸载
}
} else {
patch(container._vnode || null, vnode, container) // 创建或更新组件，进行dom diff和渲染
}
flushPostFlushCbs() // 回调调度器，使用Promise实现，与Vue2的区别是Vue2是宏任务或微任务来处理的
container._vnode = vnode // 缓存vnode节点，证明已经渲染完成,方便后续diff操作
}
在render函数中，对vnode的存在进行了判断，如果为空，则对组件进行销毁，否则将调用patch，创建组件。
接下来让我们继续进入patch函数
// packages/runtime-core/src/renderer.ts
const patch: PatchFn = (
n1, // 旧
n2, // 新
container, // 容器
anchor = null,
parentComponent = null,
parentSuspense = null,
isSVG = false,
optimized = false
) => {
// 如果两者类型不同，则直接卸载n1
if (n1 && !isSameVNodeType(n1, n2)) {
anchor = getNextHostNode(n1)
unmount(n1, parentComponent, parentSuspense, true)
n1 = null
}
if (n2.patchFlag === PatchFlags.BAIL) {
optimized = false
n2.dynamicChildren = null
}
const { type, ref, shapeFlag } = n2
// 根据不同的节点类型来进行不同的process方法
switch (type) {
case Text: // 文本
processText(n1, n2, container, anchor)
break
case Comment: // 注释
processCommentNode(n1, n2, container, anchor)
break
case Static: // 静态
if (n1 == null) {
mountStaticNode(n2, container, anchor, isSVG)
} else if (__DEV__) {
patchStaticNode(n1, n2, container, isSVG)
}
break
case Fragment: // 片段（dom数组）
processFragment(
// ...
)
break
default:
if (shapeFlag & ShapeFlags.ELEMENT) { // 原生节点(div)
processElement(
// ...
)
} else if (shapeFlag & ShapeFlags.COMPONENT) { // 组件，根组件即通过processComponent处理
processComponent(
// ...
)
} else if (shapeFlag & ShapeFlags.TELEPORT) { // 传送组件
;(type as typeof TeleportImpl).process(
// ...
)
} else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) { // 挂起组件-异步渲染
;(type as typeof SuspenseImpl).process(
// ...
)
} else if (__DEV__) {
warn('Invalid VNode type:', type, `(${typeof type})`)
}
}
// 处理节点之后处理ref
if (ref != null && parentComponent) {
setRef(ref, n1 && n1.ref, parentSuspense, n2)
}
}
我们可以看到在创建vnode时定义的shapeFlag，在这里发挥了作用。根组件经过逻辑流程之后也进入了processComponent之中。