文章首发:https://juejin.cn/post/6991461000033599495
笔者在上一篇文章《debug 一下,你就学会高效浏览开源我的项目代码~》中以 Vue3 源码调试配置为案例,给大家介绍了调试的根本配置以及强调了其在查看源码过程中的重要性。 本文将应用调试的技巧,在不须要具体理解残缺代码实现的前提下,疾速理解 Vue3 的执行流程。
最简略的代码
家喻户晓,调用 Vue.createApp
办法便创立了一个 Vue3 利用,本文从这个办法动手,一步一步分析该办法在源码中的实现,从而使得大家可能理解 Vue3 整体的执行流程。
首先,在源码目录创立 packages/vue/examples/hello.html
文件:
<script src="../dist/vue.global.js"></script>
<div id="demo">{{text}}</div>
<script>
debugger
Vue.createApp({data: () => ({text: 'hello world'})
}).mount('#demo')
</script>
代码性能非常简单:在页面中打印 hello world
字符串。这里在执行 Vue.createApp
前插入 debugger
代码,使得代码执行在 debugger
处暂停下来。
调试开始
这里还是贴一下调试的配置,如需更具体的理解调试原理和流程,请拜访笔者上一篇文章:《debug 一下,你就学会高效浏览开源我的项目代码~》。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch hello",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"file": "${workspaceFolder}/packages/vue/examples/hello.html"
}
]
}
点击调试按钮,程序在 debugger
处暂停,而后执行到 Vue.createApp
处单步进入,断点进入到 packages/runtime-dom/src/index.ts
中的 createApp
办法。
createApp
咱们间接来看 createApp
办法的源码,这里有局部代码删减,次要是针对 dev 环境的一些办法实现,不影响主体流程,下同。
// packages/runtime-dom/src/index.ts
export const createApp = ((...args) => {const app = ensureRenderer().createApp(...args)
const {mount} = app
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {const container = normalizeContainer(containerOrSelector)
if (!container) return
const component = app._component
if (!isFunction(component) && !component.render && !component.template) {component.template = container.innerHTML}
// clear content before mounting
container.innerHTML = ''
const proxy = mount(container, false, container instanceof SVGElement)
if (container instanceof Element) {container.removeAttribute('v-cloak')
container.setAttribute('data-v-app', '')
}
return proxy
}
return app
}) as CreateAppFunction<Element>
暂且不看 const app = ensureRenderer().createApp(..args)
这行代码的外部实现,咱们间接单步跳过,在左侧的调试面板能够看到 app 的值如下所示:
那么咱们正当猜想,ensureRenderer().createApp(...args)
这行代码应用传进来的参数进行属性和办法初始化,并且挂载在 app 变量中返回 。
返回 app
变量后,取出本来的 mount
办法,而后将一个新的办法实现挂载到 app
的 mount
属性中,也就是 html 文件中 .mount('#demo')
代码块的具体实现,最初返回 app 变量。
ensureRenderer().createApp(...args)
单步进入到 const app = ensureRenderer().createApp(...args)
这行代码如下所示:
这里波及到两个办法:ensureRenderer
和 createApp
,咱们一一来看。
ensureRenderer
// packages/runtime-dom/src/index.ts
function ensureRenderer() {
return (
renderer ||
(renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions))
)
}
这个办法的外围是 createRenderer
,这里不开展这个办法的具体源码,咱们看这个办法返回值的定义:
// packages/runtime-core/src/renderer.ts
export interface Renderer<HostElement = RendererElement> {
render: RootRenderFunction<HostElement>
createApp: CreateAppFunction<HostElement>
}
createRenderer
返回一个对象,具备 render
和 createApp
两个属性,render
是上面 mount
提到的渲染函数,这里不开展讲。createApp
办法是 createAppAPI
的返回值,源码如下所示:
export function createAppAPI<HostElement>(
render: RootRenderFunction,
hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {return function createApp(rootComponent, rootProps = null) {if (rootProps != null && !isObject(rootProps)) {__DEV__ && warn(`root props passed to app.mount() must be an object.`)
rootProps = null
}
const context = createAppContext()
const installedPlugins = new Set()
let isMounted = false
const app: App = (context.app = {
_uid: uid++,
_component: rootComponent as ConcreteComponent,
_props: rootProps,
_container: null,
_context: context,
_instance: null,
version,
get config() {},
set config(v) { },
use(plugin: Plugin, ...options: any[]) { },
mixin(mixin: ComponentOptions) { },
component(name: string, component?: Component): any { },
directive(name: string, directive?: Directive) { },
mount(
rootContainer: HostElement,
isHydrate?: boolean,
isSVG?: boolean
): any { },
unmount() {},
provide(key, value) {}})
return app
}
}
源码验证了咱们的猜想:createApp
将若干属性和办法挂载在 app
这个变量中,最初并返回 app
。
mount
在 const proxy = mount(container, false, container instanceof SVGElement)
这句代码中打一个断点并且单步进入,能够失去 mount
办法的代码实现:
// packages/runtime-core/src/apiCreateApp.ts
mount(
rootContainer: HostElement,
isHydrate?: boolean,
isSVG?: boolean
): any {
// 用一个变量来管制 mount 只执行一次
if (!isMounted) {
// 创立一个虚构 node 节点
const vnode = createVNode(
rootComponent as ConcreteComponent,
rootProps
)
// store app context on the root VNode.
// this will be set on the root instance on initial mount.
vnode.appContext = context
// HMR root reload
if (__DEV__) {context.reload = () => {render(cloneVNode(vnode), rootContainer, isSVG)
}
}
if (isHydrate && hydrate) {hydrate(vnode as VNode<Node, Element>, rootContainer as any)
} else {render(vnode, rootContainer, isSVG)
}
isMounted = true
app._container = rootContainer
// for devtools and telemetry
;(rootContainer as any).__vue_app__ = app
return vnode.component!.proxy
}
}
能够看到,当咱们单步跳过 render(vnode, rootContainer, isSvg)
这行代码时,hello world
字符串显示在浏览器上了,也就是说,mount
办法将 Vue 组件挂载到浏览器上,而 render
则是要害的渲染办法。
这里有一个亮点是 mount
调用 createVNode
办法来创立虚构节点,render
接管虚构节点参数进行渲染,本文不再开展讲这一部分,有趣味能够关注笔者前面的文章。
总结
本文为笔者连载 Vue3 源码浏览的第一篇,不波及各种原理的解读,次要目标是在不须要浏览具体源码的前提下,疾速理解 Vue3 组件的执行流程。
心愿读者在通读本文之后,可能通过调试的形式自行高效地浏览 Vue3 源码,如果各位感觉本文能给大家带来帮忙,点个赞再走呗~~~