622 lines
23 KiB
Markdown
622 lines
23 KiB
Markdown
|
# 29｜运行时：Vue在浏览器里是怎么跑起来的？
|
|||
|
|
|
|||
|
|
你好，我是大圣。
|
|||
|
|
|
|||
|
|
上一讲我们学习了Vue响应式的大致原理，响应式就是可以把普通的JavaScript对象包裹成响应式对象，这样，我们对对象做的修改，响应式都能够监听到，并且执行effect内部注册的函数来执行数据修改之后的效果。
|
|||
|
|
|
|||
|
|
那今天我就跟你聊一下Vue在浏览器里是如何运行的，照例我们还是对着Vue 3的源码来学习，不过源码复杂，为了帮助你理解主要逻辑，我会直接把源码简化再演示，当然怎么简化源码的一些小技巧也会顺便分享给你。
|
|||
|
|
|
|||
|
|
好了废话不多说，我们马上开始。前端框架需要处理的最核心的两个流程，就是首次渲染和数据更新后的渲染。先来看首次渲染的源码。演示代码会用Vue 3的实际代码，你也可以在 [weiyouyi](https://github.com/shengxinjing/weiyouyi/blob/main/src/runtime-core/apiCreateApp.js#L4) 项目中看到我们课程的mini版本代码。
|
|||
|
|
|
|||
|
|
## 首次渲染
|
|||
|
|
|
|||
|
|
我们知道，想要启动一个Vue项目，只需要从Vue中引入createApp，传入App组件，并且调用createApp返回的App实例的mount方法，就实现了项目的启动。这个时候Vue也完成了首次渲染，代码逻辑如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
所以createApp就是项目的初始化渲染入口。
|
|||
|
|
|
|||
|
|
但是这段简单的代码是怎么完成初始化渲染的呢？我们可以在Vue中的runtime-dom中看到createApp的定义，你可以打开 [GitHub链接](https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/src/index.ts#L66)查看。
|
|||
|
|
|
|||
|
|
这里就有一个看代码的小技巧，分享给你，我们首次查看源码的时候，可以先把一些无用的信息删除，方便自己梳理主体的逻辑。看Vue代码，和今天主题无关的无用信息有哪些，\_\_COMPAT\_\_代码是用来兼容Vue 2的，\_\_DEV\_\_代码是用来调试的，我们可以把这些代码删除之后，得到下面的简化版createApp源码。
|
|||
|
|
|
|||
|
|
再看思路就比较清晰了。我们使用ensureRenderer返回的对象去创建app，并且重写了app.mount方法；在mount方法内部，我们查找mount传递的DOM元素，并且调用ensureRenderer返回的mount方法，进行初始化渲染。如下图所示：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
之前我们讲过要会TypeScript，这时你就能感受到TypeScript的好处了，现在即使我们不知道app.mount是什么逻辑，也能知道这个函数的参数只能是Element、ShadowRoot或者string三者之一，也就很好理解内部的normalizeContainer就是把你传递的参数统一变为浏览器的DOM元素，Typescript类型带来的好处，我们在读源码的时候会一直感受得到。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export const createApp = ((...args) => {
|
|||
|
|
const app = ensureRenderer().createApp(...args)
|
|||
|
|
const { mount } = app
|
|||
|
|
// 重写mount
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
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
|
|||
|
|
})
|
|||
|
|
function normalizeContainer(container){
|
|||
|
|
if (isString(container)) {
|
|||
|
|
const res = document.querySelector(container)
|
|||
|
|
}
|
|||
|
|
return container
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
我们继续深入了解ensureRenderer方法，以及ensureRenderer方法返回的createApp方法。
|
|||
|
|
|
|||
|
|
**这里ensureRenderer函数，内部通过createRenderer函数，创建了一个浏览器的渲染器，并且缓存了渲染器renderer**，这种使用闭包做缓存的方式，你在日常开发中也可以借鉴这种思路。
|
|||
|
|
|
|||
|
|
createRenderer函数，我们在自定义渲染器那一讲里学到过，传递的rendererOptions就是浏览器里面标签的增删改查API：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 浏览器dom操作
|
|||
|
|
import { nodeOps } from './nodeOps'
|
|||
|
|
// 浏览器dom属性更新
|
|||
|
|
import { patchProp } from './patchProp'
|
|||
|
|
import { createRenderer } from '@vue/runtime-core'
|
|||
|
|
const rendererOptions = extend({ patchProp }, nodeOps)
|
|||
|
|
|
|||
|
|
let renderer: Renderer<Element | ShadowRoot> | HydrationRenderer
|
|||
|
|
|
|||
|
|
function ensureRenderer() {
|
|||
|
|
return (
|
|||
|
|
renderer ||
|
|||
|
|
(renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions))
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
可以看到，createRenderer函数传递的参数是nodeOps和patchProp的合并对象。
|
|||
|
|
|
|||
|
|
我们继续进入nodeOps和pathProp也可以看到下面的代码，写了很多方法。通过ensureRenderer存储这些操作方法后，createApp内部就可以脱离具体的渲染平台了，这也是Vue 3实现跨端的核心逻辑：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
|
|||
|
|
insert: (child, parent, anchor) => {
|
|||
|
|
parent.insertBefore(child, anchor || null)
|
|||
|
|
},
|
|||
|
|
remove: child => {
|
|||
|
|
const parent = child.parentNode
|
|||
|
|
if (parent) {
|
|||
|
|
parent.removeChild(child)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
createElement: (tag, isSVG, is, props): Element => {
|
|||
|
|
const el = isSVG
|
|||
|
|
? doc.createElementNS(svgNS, tag)
|
|||
|
|
: doc.createElement(tag, is ? { is } : undefined)
|
|||
|
|
|
|||
|
|
if (tag === 'select' && props && props.multiple != null) {
|
|||
|
|
;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
|
|||
|
|
}
|
|||
|
|
return el
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
createText: text => doc.createTextNode(text),
|
|||
|
|
|
|||
|
|
createComment: text => doc.createComment(text),
|
|||
|
|
|
|||
|
|
setText: (node, text) => {
|
|||
|
|
node.nodeValue = text
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setElementText: (el, text) => {
|
|||
|
|
el.textContent = text
|
|||
|
|
},
|
|||
|
|
parentNode: node => node.parentNode as Element | null,
|
|||
|
|
nextSibling: node => node.nextSibling,
|
|||
|
|
querySelector: selector => doc.querySelector(selector),
|
|||
|
|
...
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
然后我们就需要进入到rumtime-core模块去看下createRenderer是如何工作的。你可以在这个[GitHub链接](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/renderer.ts#L290)内看到createRenderer的代码逻辑。当然源码比较复杂，我们照样需要简化一下。
|
|||
|
|
|
|||
|
|
createRenderer是调用baseCreateRenderer创建的，baseCreateRenderer函数内部有十几个函数，代码行数合计2000行左右，这也是我们学习Vue源码最复杂的一个函数了。按前面简化源码的思路，先把工具函数的实现折叠起来，精简之后代码主要逻辑其实很简单。
|
|||
|
|
|
|||
|
|
我们一起来看。
|
|||
|
|
|
|||
|
|
首先获取了平台上所有的insert、remove函数，这些函数都是nodeOps传递进来的，然后定义了一些列patch、mount、unmount函数，通过名字我们不难猜出，这就是Vue中更新、渲染组件的工具函数，比如mountElement就是渲染DOM元素、mountComponent就是渲染组件updateComponent就是更新组件。这部分的简化代码，你也可以在[weiyouyi](https://github.com/shengxinjing/weiyouyi/blob/main/src/runtime-core/renderer.js)项目中查看。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export function createRenderer<
|
|||
|
|
HostNode = RendererNode,
|
|||
|
|
HostElement = RendererElement
|
|||
|
|
>(options: RendererOptions<HostNode, HostElement>) {
|
|||
|
|
return baseCreateRenderer<HostNode, HostElement>(options)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function baseCreateRenderer(){
|
|||
|
|
const {
|
|||
|
|
insert: hostInsert,
|
|||
|
|
remove: hostRemove,
|
|||
|
|
patchProp: hostPatchProp,
|
|||
|
|
createElement: hostCreateElement,
|
|||
|
|
createText: hostCreateText,
|
|||
|
|
createComment: hostCreateComment,
|
|||
|
|
setText: hostSetText,
|
|||
|
|
setElementText: hostSetElementText,
|
|||
|
|
parentNode: hostParentNode,
|
|||
|
|
nextSibling: hostNextSibling,
|
|||
|
|
setScopeId: hostSetScopeId = NOOP,
|
|||
|
|
cloneNode: hostCloneNode,
|
|||
|
|
insertStaticContent: hostInsertStaticContent
|
|||
|
|
} = options
|
|||
|
|
const patch = ()=>... //一个函数
|
|||
|
|
const processText = ()=>...
|
|||
|
|
const processCommentNode = ()=>...
|
|||
|
|
const processElement = ()=>...
|
|||
|
|
const mountElement = ()=>...
|
|||
|
|
const mountChildren = ()=>...
|
|||
|
|
const patchElement = ()=>...
|
|||
|
|
const patchBlockChildren = ()=>...
|
|||
|
|
const patchProps = ()=>...
|
|||
|
|
const processComponent = ()=>...
|
|||
|
|
const mountComponent = ()=>...
|
|||
|
|
const updateComponent = ()=>...
|
|||
|
|
const setupRenderEffect = ()=>...
|
|||
|
|
const patchChildren = ()=>...
|
|||
|
|
const patchKeyedChildren = ()=>...
|
|||
|
|
const unmount = ()=>...
|
|||
|
|
const unmountComponent = ()=>...
|
|||
|
|
const unmountComponent = ()=>...
|
|||
|
|
const unmountComponent = ()=>...
|
|||
|
|
const unmountComponent = ()=>...
|
|||
|
|
const render: RootRenderFunction = (vnode, container, isSVG) => {
|
|||
|
|
if (vnode == null) {
|
|||
|
|
if (container._vnode) {
|
|||
|
|
unmount(container._vnode, null, null, true)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
patch(container._vnode || null, vnode, container, null, null, null, isSVG)
|
|||
|
|
}
|
|||
|
|
flushPostFlushCbs()
|
|||
|
|
container._vnode = vnode
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
render,
|
|||
|
|
hydrate,
|
|||
|
|
createApp: createAppAPI(render, hydrate)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
整个createApp函数的执行逻辑如下图所示：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
最后返回的createApp方法，实际上是createAPI的返回值，并且给createAPI传递了render方法。render方法内部很简单，就是判断container容器上有没有\_vnode属性，如果有的话就执行unmout方法，没有的话就执行patch方法，最后把vnode信息存储在container.\_vnode上。
|
|||
|
|
|
|||
|
|
那createAppAPI又做了什么呢？我们继续进入createAppAPI源码，看下面的代码。内部创建了一个app对象，app上注册了我们熟悉的use、component和mount等方法：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export function createAppAPI<HostElement>(
|
|||
|
|
render: RootRenderFunction,
|
|||
|
|
hydrate?: RootHydrateFunction
|
|||
|
|
): CreateAppFunction<HostElement> {
|
|||
|
|
return function createApp(rootComponent, rootProps = null) {
|
|||
|
|
const context = createAppContext()
|
|||
|
|
let isMounted = false
|
|||
|
|
|
|||
|
|
const app: App = (context.app = {
|
|||
|
|
_context: context,
|
|||
|
|
_instance: null,
|
|||
|
|
use(plugin: Plugin, ...options: any[]) ,
|
|||
|
|
component(name: string, component?: Component): any {
|
|||
|
|
if (!component) {
|
|||
|
|
return context.components[name]
|
|||
|
|
}
|
|||
|
|
context.components[name] = component
|
|||
|
|
return app
|
|||
|
|
},
|
|||
|
|
directive(name: string, directive?: Directive)
|
|||
|
|
mount(
|
|||
|
|
rootContainer: HostElement,
|
|||
|
|
isHydrate?: boolean,
|
|||
|
|
isSVG?: boolean
|
|||
|
|
): any {
|
|||
|
|
if (!isMounted) {
|
|||
|
|
const vnode = createVNode(
|
|||
|
|
rootComponent as ConcreteComponent,
|
|||
|
|
rootProps
|
|||
|
|
)
|
|||
|
|
vnode.appContext = context
|
|||
|
|
// 核心的逻辑
|
|||
|
|
if (isHydrate && hydrate) {
|
|||
|
|
hydrate(vnode as VNode<Node, Element>, rootContainer as any)
|
|||
|
|
} else {
|
|||
|
|
render(vnode, rootContainer, isSVG)
|
|||
|
|
}
|
|||
|
|
return getExposeProxy(vnode.component!) || vnode.component!.proxy
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
provide(key, value) {
|
|||
|
|
context.provides[key as string] = value
|
|||
|
|
return app
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return app
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
可以看到mount内部执行的是传递进来的render方法，也就是上面的render方法。container 就是我们app.mount中传递的DOM元素，对DOM元素进行处理之后，执行patch函数实现整个应用的加载。
|
|||
|
|
|
|||
|
|
所以我们的下一个任务就是需要搞清楚patch函数的执行逻辑。
|
|||
|
|
|
|||
|
|
### patch 函数
|
|||
|
|
|
|||
|
|
patch传递的是container.\_vnode，也就是上一次渲染缓存的vnode、本次渲染组件的vnode，以及容器container。
|
|||
|
|
|
|||
|
|
下面就是patch函数的代码，核心代码我添加了注释。其中n1是上次渲染的虚拟DOM，n2是下次要渲染的虚拟DOM。
|
|||
|
|
|
|||
|
|
首先可以把n1和n2做一次判断，如果虚拟DOM的节点类型不同，就直接unmount之前的节点。因为比如之前是Button组件，现在要渲染Container组件，就没有计算diff的必要，直接把Button组件销毁再渲染Container即可。
|
|||
|
|
|
|||
|
|
如果n1和n2类型相同，比如都是Button组件或者都是div标签，我们需要判断具体的类型再去执行不同的函数，比如processText、processFragment、processElement以及processComponent等函数。
|
|||
|
|
|
|||
|
|
看第55行，这里的ShapeFlags用到了位运算的知识，我们后面会通过刷算法题的方式介绍，暂时我们只需要知道，ShapeFlags可以帮助我们快速判断需要操作的类型就可以了。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const patch: PatchFn = (
|
|||
|
|
n1,
|
|||
|
|
n2,
|
|||
|
|
container,
|
|||
|
|
anchor = null,
|
|||
|
|
parentComponent = null,
|
|||
|
|
parentSuspense = null,
|
|||
|
|
isSVG = false,
|
|||
|
|
slotScopeIds = null,
|
|||
|
|
optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
|
|||
|
|
) => {
|
|||
|
|
// 两次虚拟dom完全一样 啥也不用干
|
|||
|
|
if (n1 === n2) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 虚拟dom节点类型不一样， unmount老的虚拟dom，并且n1赋值null
|
|||
|
|
if (n1 && !isSameVNodeType(n1, n2)) {
|
|||
|
|
anchor = getNextHostNode(n1)
|
|||
|
|
unmount(n1, parentComponent, parentSuspense, true)
|
|||
|
|
n1 = null
|
|||
|
|
}
|
|||
|
|
// n2是要渲染的虚拟dom，我们获取type，ref和shapeFlag
|
|||
|
|
const { type, ref, shapeFlag } = n2
|
|||
|
|
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:
|
|||
|
|
processFragment(
|
|||
|
|
n1,
|
|||
|
|
n2,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
parentComponent,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG,
|
|||
|
|
slotScopeIds,
|
|||
|
|
optimized
|
|||
|
|
)
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
// 运运算判断操作类型
|
|||
|
|
if (shapeFlag & ShapeFlags.ELEMENT) {
|
|||
|
|
// html标签
|
|||
|
|
processElement(
|
|||
|
|
n1,
|
|||
|
|
n2,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
parentComponent,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG,
|
|||
|
|
slotScopeIds,
|
|||
|
|
optimized
|
|||
|
|
)
|
|||
|
|
} else if (shapeFlag & ShapeFlags.COMPONENT) {
|
|||
|
|
// 组件
|
|||
|
|
processComponent(
|
|||
|
|
n1,
|
|||
|
|
n2,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
parentComponent,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG,
|
|||
|
|
slotScopeIds,
|
|||
|
|
optimized
|
|||
|
|
)
|
|||
|
|
} else if (shapeFlag & ShapeFlags.TELEPORT) {
|
|||
|
|
;(type as typeof TeleportImpl).process(
|
|||
|
|
n1 as TeleportVNode,
|
|||
|
|
n2 as TeleportVNode,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
parentComponent,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG,
|
|||
|
|
slotScopeIds,
|
|||
|
|
optimized,
|
|||
|
|
internals
|
|||
|
|
)
|
|||
|
|
} else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
|
|||
|
|
;(type as typeof SuspenseImpl).process(
|
|||
|
|
n1,
|
|||
|
|
n2,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
parentComponent,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG,
|
|||
|
|
slotScopeIds,
|
|||
|
|
optimized,
|
|||
|
|
internals
|
|||
|
|
)
|
|||
|
|
} else if (__DEV__) {
|
|||
|
|
warn('Invalid VNode type:', type, `(${typeof type})`)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// set ref
|
|||
|
|
if (ref != null && parentComponent) {
|
|||
|
|
setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
代码的整体执行逻辑如下图所示：
|
|||
|
|
|
|||
|
|
我们首次渲染的App是一个组件，所以要执行的就是processComponent方法。
|
|||
|
|
|
|||
|
|
### processComponent方法
|
|||
|
|
|
|||
|
|
那我们继续进入到processComponent代码内部，看下面的代码。首次渲染的时候，n1就是null，所以会执行mountComponent；如果是更新组件的时候，n1就是上次渲染的vdom，需要执行updateComponent。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const processComponent = (
|
|||
|
|
n1: VNode | null,
|
|||
|
|
n2: VNode,
|
|||
|
|
container: RendererElement,
|
|||
|
|
anchor: RendererNode | null,
|
|||
|
|
parentComponent: ComponentInternalInstance | null,
|
|||
|
|
parentSuspense: SuspenseBoundary | null,
|
|||
|
|
isSVG: boolean,
|
|||
|
|
slotScopeIds: string[] | null,
|
|||
|
|
optimized: boolean
|
|||
|
|
) => {
|
|||
|
|
n2.slotScopeIds = slotScopeIds
|
|||
|
|
if (n1 == null) {
|
|||
|
|
if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
|
|||
|
|
;(parentComponent!.ctx as KeepAliveContext).activate(
|
|||
|
|
n2,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
isSVG,
|
|||
|
|
optimized
|
|||
|
|
)
|
|||
|
|
} else {
|
|||
|
|
mountComponent(
|
|||
|
|
n2,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
parentComponent,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG,
|
|||
|
|
optimized
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
updateComponent(n1, n2, optimized)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
updateComponent是虚拟DOM的逻辑，我们会在下一讲详细剖析，这一讲主要讲首次渲染的过程。
|
|||
|
|
|
|||
|
|
所以我们进入mountComponent函数中，可以看到mountComponent函数内部会对组件的类型进行一系列的判断，还有一些对Vue 2的兼容代码，核心的渲染逻辑就是setupComponent函数和setupRenderEffect函数。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import {setupComponent} from './component'
|
|||
|
|
const mountComponent: MountComponentFn = (
|
|||
|
|
) => {
|
|||
|
|
// 2.x compat may pre-creaate the component instance before actually
|
|||
|
|
// mounting
|
|||
|
|
const compatMountInstance =
|
|||
|
|
__COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
|
|||
|
|
const instance: ComponentInternalInstance =
|
|||
|
|
compatMountInstance ||
|
|||
|
|
(initialVNode.component = createComponentInstance(
|
|||
|
|
initialVNode,
|
|||
|
|
parentComponent,
|
|||
|
|
parentSuspense
|
|||
|
|
))
|
|||
|
|
|
|||
|
|
// resolve props and slots for setup context
|
|||
|
|
if (!(__COMPAT__ && compatMountInstance)) {
|
|||
|
|
|
|||
|
|
setupComponent(instance)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
(
|
|||
|
|
instance,
|
|||
|
|
initialVNode,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG,
|
|||
|
|
optimized
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
if (__DEV__) {
|
|||
|
|
popWarningContext()
|
|||
|
|
endMeasure(instance, `mount`)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
setupComponent和setupRenderEffect，它俩又做了点什么呢？可以参考下面的示意图这两个实现组件首次渲染的函数：
|
|||
|
|
|
|||
|
|
|
|||
|
|
### setupComponent
|
|||
|
|
|
|||
|
|
首先看setupComponent，要完成的就是执行我们写的setup函数。
|
|||
|
|
|
|||
|
|
可以看到，内部先初始化了props和slots，并且执行setupStatefulComponent创建组件，而这个函数内部从component中获取setup属性，也就是script setup内部实现的函数，就进入到我们组件内部的reactive、ref等函数实现的逻辑了。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export function setupComponent(
|
|||
|
|
instance: ComponentInternalInstance,
|
|||
|
|
isSSR = false
|
|||
|
|
) {
|
|||
|
|
isInSSRComponentSetup = isSSR
|
|||
|
|
|
|||
|
|
const { props, children } = instance.vnode
|
|||
|
|
const isStateful = isStatefulComponent(instance)
|
|||
|
|
initProps(instance, props, isStateful, isSSR)
|
|||
|
|
initSlots(instance, children)
|
|||
|
|
|
|||
|
|
const setupResult = isStateful
|
|||
|
|
? setupStatefulComponent(instance, isSSR)
|
|||
|
|
: undefined
|
|||
|
|
isInSSRComponentSetup = false
|
|||
|
|
return setupResult
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setupStatefulComponent(
|
|||
|
|
instance: ComponentInternalInstance,
|
|||
|
|
isSSR: boolean
|
|||
|
|
) {
|
|||
|
|
const Component = instance.type as ComponentOptions
|
|||
|
|
// 执行setup
|
|||
|
|
const { setup } = Component
|
|||
|
|
if (setup) {
|
|||
|
|
const setupContext = (instance.setupContext =
|
|||
|
|
setup.length > 1 ? createSetupContext(instance) : null)
|
|||
|
|
|
|||
|
|
setCurrentInstance(instance)
|
|||
|
|
pauseTracking()
|
|||
|
|
const setupResult = callWithErrorHandling(
|
|||
|
|
setup,
|
|||
|
|
instance,
|
|||
|
|
ErrorCodes.SETUP_FUNCTION,
|
|||
|
|
[instance.props, setupContext]
|
|||
|
|
)
|
|||
|
|
if (isPromise(setupResult)) {
|
|||
|
|
setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
|
|||
|
|
} else {
|
|||
|
|
handleSetupResult(instance, setupResult, isSSR)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
finishComponentSetup(instance, isSSR)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function callWithErrorHandling(
|
|||
|
|
fn: Function,
|
|||
|
|
instance: ComponentInternalInstance | null,
|
|||
|
|
type: ErrorTypes,
|
|||
|
|
args?: unknown[]
|
|||
|
|
) {
|
|||
|
|
let res
|
|||
|
|
try {
|
|||
|
|
res = args ? fn(...args) : fn()
|
|||
|
|
} catch (err) {
|
|||
|
|
handleError(err, instance, type)
|
|||
|
|
}
|
|||
|
|
return res
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### setupRenderEffect
|
|||
|
|
|
|||
|
|
另一个setupRenderEffect函数，就是为了后续数据修改注册的函数，我们先梳理一下核心的实现逻辑。
|
|||
|
|
|
|||
|
|
组件首次加载会调用patch函数去初始化子组件，注意setupRenderEffect本身就是在patch函数内部执行的，所以这里就会递归整个虚拟DOM树，然后触发生命周期mounted，完成这个组件的初始化。
|
|||
|
|
|
|||
|
|
页面首次更新结束后，setupRenderEffect不仅实现了组件的递归渲染，还注册了组件的更新机制。
|
|||
|
|
|
|||
|
|
在下面的核心代码中，我们通过ReactiveEffect创建了effect函数，这个概念上一讲我们手写过，然后执行instance.update赋值为effect.run方法，这样结合setup内部的ref和reactive绑定的数据，数据修改之后，就会触发update方法的执行，内部就会componentUpdateFn，内部进行递归的patch调用执行每个组件内部的update方法实现组件的更新。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
if (!instance.isMounted) {
|
|||
|
|
patch(
|
|||
|
|
null,
|
|||
|
|
subTree,
|
|||
|
|
container,
|
|||
|
|
anchor,
|
|||
|
|
instance,
|
|||
|
|
parentSuspense,
|
|||
|
|
isSVG
|
|||
|
|
)
|
|||
|
|
}else{
|
|||
|
|
// updateComponent
|
|||
|
|
}
|
|||
|
|
// create reactive effect for rendering
|
|||
|
|
const effect = new ReactiveEffect(
|
|||
|
|
componentUpdateFn,
|
|||
|
|
() => queueJob(instance.update),
|
|||
|
|
instance.scope // track it in component's effect scope
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const update = (instance.update = effect.run.bind(effect) as SchedulerJob)
|
|||
|
|
update.id = instance.uid
|
|||
|
|
|
|||
|
|
update()
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这样我们就实现了整个Vue的渲染和更新流程。
|
|||
|
|
|
|||
|
|
## 总结
|
|||
|
|
|
|||
|
|
今天要学的内容就聊完了，我们来总结一下学到的内容吧，今天我们分析了Vue 3在浏览器中执行的全流程，你可以配合Vue在浏览器中执行的流程图来复习。
|
|||
|
|
|
|||
|
|
|
|||
|
|
Vue通过createApp创建应用，并且执行返回的mount方法实现在浏览器中的挂载，在createApp中，通过传递浏览器平台的操作方法nodeOps创建了浏览器的渲染器renderer。
|
|||
|
|
|
|||
|
|
首次执行Vue项目的时候，通过patch实现组件的渲染，patch函数内部根据节点的不同类型，去分别执行processElement、processComponent、processText等方法去递归处理不同类型的节点，最终通过setupComponent执行组件的setup函数，setupRenderEffect中使用响应式的effect函数监听数据的变化。
|
|||
|
|
|
|||
|
|
你可以先看我们实现的迷你版本项目weiyouyi，然后再去看Vue 3中实际的代码，可以学习代码中很多优秀的设计思路，比如createRenderer中使用闭包作为缓存、使用位运算来提高组件类型的判断效率等。学习优秀框架中的代码设计，这对我们日常开发项目的代码质量也有很好的提高作用。
|
|||
|
|
|
|||
|
|
## 思考题
|
|||
|
|
|
|||
|
|
最后留一个思考题，mount函数中除了render函数，还有一个hydrate的函数调用，这个函数式干什么用的呢？欢迎在评论区分享你的答案，我们下一讲再见。
|
|||
|
|
|