从一个单元测试出发，梳理vue3的渲染过程

lsekfe

先来看一个单测。

1. 
   
2. test('receive component instance as 2nd arg', () => {
   
3. 
   
4.     transformVNodeArgs((args, instance) => {
   
5. 
   
6.         if (instance) {
   
7. 
   
8.           return ['h1', null, instance.type.name]
   
9. 
   
10.         } else {
    
11. 
    
12.           return args
    
13. 
    
14.         }
    
15. 
    
16.     })
    
17. 
    
18.     const App = {
    
19. 
    
20.         // this will be the name of the component in the h1
    
21. 
    
22.         name: 'Root Component',
    
23. 
    
24.         render() {
    
25. 
    
26.           return h('p') // this will be overwritten by the transform
    
27. 
    
28.         }
    
29. 
    
30.     }
    
31. 
    
32.     const root = nodeOps.createElement('div')
    
33. 
    
34.     createApp(App).mount(root)
    
35. 
    
36. })

复制代码

我们先从最熟悉的createApp(App).mount(root)这句入手，分两步看起。第一步 createApp(App)创建App实例，第二步mount(root)挂载。
　　1. createApp
　　packages\runtime-dom\src\index.ts

1. const createApp = ((...args) => {
   
2. 
   
3.       const app = ensureRenderer().createApp(...args);
   
4. 
   
5.       {
   
6. 
   
7.           injectNativeTagCheck(app);
   
8. 
   
9.       }
   
10. 
    
11.       const { mount } = app;
    
12. 
    
13.       app.mount = (containerOrSelector) => {
    
14. 
    
15.           // 调用解构生成的mount方法...
    
16. 
    
17.       };
    
18. 
    
19.       return app;
    
20. 
    
21.   });

复制代码

该方法返回app实例，并在其上定义mount方法，即第二步的mount方法。
　　此app实例是由ensureRenderer返回render方法调用后的实例，并调用其上的createApp方法生成的。

1. 
   
2. function ensureRenderer() {  
   
3. 
   
4.     return renderer || (renderer = createRenderer(rendererOptions))
   
5. 
   
6. }

复制代码

即 ensureRenderer --> createRenderer --> baseCreateRenderer -->
　　其中，rendererOptions = extend({ patchProp, forcePatchProp }, nodeOps) ，作为操作DOM的方法。baseCreateRenderer定义了一系列操作的闭包方法，供渲染使用（packages\runtime-core\src\renderer.ts）。
　　接下来就是createAppAPI(render, hydrate)（packages\runtime-core\src\apiCreateApp.ts）

1. 
   
2. export function createAppAPI<HostElement>(  render: RootRenderFunction,  hydrate?: RootHydrateFunction): CreateAppFunction<HostElement> {  
   
3. 
   
4.     return function createApp(rootComponent, rootProps = null) {   
   
5. 
   
6.       //...
   
7. 
   
8.       //app实例上下文context对象
   
9. 
   
10.       //config: { isNativeTag: NO, devtools: true, performance: false, globalProperties: {}, optionMergeStrategies: {}, isCustomElement: NO, warnHandler: undefined },   
    
11. 
    
12.       // mixins: [], components: {}, directives: {}, provides: Object.create(null) }   
    
13. 
    
14.       const context = createAppContext()   
    
15. 
    
16.       const installedPlugins = new Set()   
    
17. 
    
18.       let isMounted = false
    
19. 
    
20.       const app: App = {      nder: RootRenderFunction,  hydrate?: RootHydrateFunction): CreateAppFunction<HostElement> {  
    
21. 
    
22.          _component: rootComponent as Component,
    
23. 
    
24.          _props: rootProps,
    
25. 
    
26.          _container: null,
    
27. 
    
28.          _context: context,
    
29. 
    
30.          version,
    
31. 
    
32.          get config() {
    
33. 
    
34.              return context.config
    
35. 
    
36.          },      
    
37. 
    
38.          set config(v) {        
    
39. 
    
40.             if (__DEV__) {         
    
41. 
    
42.                 warn( `app.config cannot be replaced. Modify individual options instead.`)
    
43. 
    
44.             }
    
45. 
    
46.          },
    
47. 
    
48.         use(plugin: Plugin, ...options: any[]) {},
    
49. 
    
50.         mixin(mixin: ComponentOptions) {},
    
51. 
    
52.         component(name: string, component?: PublicAPIComponent): any {},
    
53. 
    
54.         directive(name: string, directive?: Directive) {},
    
55. 
    
56.         mount(rootContainer: HostElement, isHydrate?: boolean): any {}
    
57. 
    
58.         unmount() {}
    
59. 
    
60.         provide(key, value) {}
    
61. 
    
62.     }   
    
63. 
    
64.     return app
    
65. 
    
66.   }
    
67. 
    
68. }

复制代码

mount方法就是在第二步中的主要逻辑。

1. 
   
2. function injectNativeTagCheck(app: App) {
   
3. 
   
4.     // Inject `isNativeTag`
   
5. 
   
6.     // this is used for component name validation (dev only)
   
7. 
   
8.     Object.defineProperty(app.config, 'isNativeTag', {
   
9. 
   
10.         value: (tag: string) => isHTMLTag(tag) || isSVGTag(tag),
    
11. 
    
12.         writable: false  
    
13. 
    
14.     })
    
15. 
    
16. }

复制代码

注入验证组件name的isNativeTag。至此，第一步告一段落。
　　2. mount
　　挂载：

1. 
   
2. const { mount } = app
   
3. 
   
4. app.mount = (containerOrSelector: Element | string): any => {
   
5. 
   
6.     const container = normalizeContainer(containerOrSelector)  // document.querySelector(container)或者container
   
7. 
   
8.     if (!container) return const component = app._component   // App根组件
   
9. 
   
10.     if (!isFunction(component) && !component.render && !component.template) {
    
11. 
    
12.         component.template = container.innerHTML
    
13. 
    
14.     }
    
15. 
    
16.     // clear content before mounting
    
17. 
    
18.     container.innerHTML = ''
    
19.    
    
20. 
    
21.     const proxy = mount(container)
    
22. 
    
23.     container.removeAttribute('v-cloak')
    
24. 
    
25.     return proxy
    
26. 
    
27. }

复制代码

mount的过程：

1. 
   
2. function mount(rootContainer: HostElement, isHydrate?: boolean): any {
   
3. 
   
4.     if (!isMounted) {
   
5. 
   
6.         const vnode = createVNode(rootComponent as Component, rootProps)
   
7. 
   
8.         // store app context on the root VNode.
   
9. 
   
10.         // this will be set on the root instance on initial mount.
    
11. 
    
12.         vnode.appContext = context   // createApp时创建的app上下文
    
13. 
    
14.         // HMR root reload
    
15. 
    
16.         if (__DEV__) {
    
17. 
    
18.             context.reload = () => {       // 什么时候触发？？？
    
19. 
    
20.                 render(cloneVNode(vnode), rootContainer)
    
21. 
    
22.             }
    
23. 
    
24.         }
    
25. 
    
26.         if (isHydrate && hydrate) {
    
27. 
    
28.             hydrate(vnode as VNode<Node, Element>, rootContainer as any)
    
29. 
    
30.         } else {
    
31. 
    
32.             render(vnode, rootContainer)
    
33. 
    
34.         }
    
35. 
    
36.         
    
37. 
    
38.         isMounted = true
    
39. 
    
40.         app._container = rootContainer
    
41. 
    
42.         
    
43. 
    
44.         return vnode.component!.proxy
    
45. 
    
46.    }
    
47. 
    
48. }

复制代码

isMounted为false，基于根组件创建vnode，绑定上下文，执行render函数完成页面渲染，isMounted置为true，app实例的_container绑定根DOM元素root。
　　接下来就是老太太裹脚布般的render过程：

1. 
   
2. const render: RootRenderFunction = (vnode, container) => {
   
3. 
   
4.     if (vnode == null) {
   
5. 
   
6.         if (container._vnode) {
   
7. 
   
8.             unmount(container._vnode, null, null, true)   // 卸载
   
9. 
   
10.         }
    
11. 
    
12.     } else {
    
13. 
    
14.         patch(container._vnode || null, vnode, container)
    
15. 
    
16.     }
    
17. 
    
18.     flushPostFlushCbs()    // check递归次数
    
19. 
    
20.     container._vnode = vnode
    
21. 
    
22. }

复制代码

patch(null, vnode, container)打补丁。

1. 
   
2. const patch: PatchFn = (
   
3. 
   
4.     n1,
   
5. 
   
6.     n2,
   
7. 
   
8.     container,
   
9. 
   
10.     anchor = null,
    
11. 
    
12.     parentComponent = null,
    
13. 
    
14.     parentSuspense = null,
    
15. 
    
16.     isSVG = false,
    
17. 
    
18.     optimized = false  ) => {
    
19. 
    
20.     // patching & not same type, unmount old tree
    
21. 
    
22.     if (n1 && !isSameVNodeType(n1, n2)) {
    
23. 
    
24.         anchor = getNextHostNode(n1)
    
25. 
    
26.         unmount(n1, parentComponent, parentSuspense, true)
    
27. 
    
28.         n1 = null
    
29. 
    
30.     }
    
31. 
    
32.     if (n2.patchFlag === PatchFlags.BAIL) {
    
33. 
    
34.         optimized = false
    
35. 
    
36.         n2.dynamicChildren = null
    
37. 
    
38.     }
    
39. 
    
40.     const { type, ref, shapeFlag } = n2
    
41. 
    
42.     switch (type) {
    
43. 
    
44.         case Text:
    
45. 
    
46.             processText(n1, n2, container, anchor)
    
47. 
    
48.             break
    
49. 
    
50.        case Comment:
    
51. 
    
52.             processCommentNode(n1, n2, container, anchor)
    
53. 
    
54.             break
    
55. 
    
56.        case Static:
    
57. 
    
58.             if (n1 == null) {
    
59. 
    
60.                 mountStaticNode(n2, container, anchor, isSVG)
    
61. 
    
62.             } else if (__DEV__) {
    
63. 
    
64.                 patchStaticNode(n1, n2, container, isSVG)
    
65. 
    
66.             }
    
67. 
    
68.             break
    
69. 
    
70.        case Fragment:
    
71. 
    
72.             processFragment(/*参数还是那些参数*/)
    
73. 
    
74.             break
    
75. 
    
76.        default:
    
77. 
    
78.             if (shapeFlag & ShapeFlags.ELEMENT) {
    
79. 
    
80.                 processElement(/*参数还是那些参数*/)
    
81. 
    
82.             } else if (shapeFlag & ShapeFlags.COMPONENT) {
    
83. 
    
84.                 processComponent(/*参数还是那些参数*/)
    
85. 
    
86.             } else if (shapeFlag & ShapeFlags.TELEPORT) {
    
87. 
    
88.                 ;(type as typeof TeleportImpl).process( /*参数还是那些参数,*/ internals )
    
89. 
    
90.            } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {         
    
91. 
    
92.                 ;(type as typeof SuspenseImpl).process( /*参数还是那些参数,*/ internals )
    
93. 
    
94.            } else if (__DEV__) {
    
95. 
    
96.                 warn('Invalid VNode type:', type, `(${typeof type})`)
    
97. 
    
98.            }
    
99. 
    
100.       }
     
101. 
     
102.       // set ref
     
103. 
     
104.       if (ref != null && parentComponent) {
     
105. 
     
106.         setRef(ref, n1 && n1.ref, parentComponent, parentSuspense, n2)
     
107. 
     
108.       }
     
109. 
     
110. }

复制代码

在这个[url=]单元测试[/url]的情况下，type是App对象，即Object类型。ref为undefined，shapeFlag为4，所以来到了processComponent方法。
　　processComponent
　　--> mountComponent
　　--> instance = createComponentInstance(vnode, parent = null, suspense = null)
　　--> instance.ctx = createRenderContext(instance)
　　--> setupComponent(instance)
　　--> initProps(instance, props = null, isStateful = 4, isSSR = false)
　　--> initSlots(instance, children = null)
　　--> setupStatefulComponent(instance, isSSR)
　　-->setupRenderEffect( instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized )
　　normalizePropsOptions函数可以看做类似扁平化，返回的是[normalized, needCastKeys],是对props、extends、mixins中的props做递归，浅拷贝得到的props和驼峰命名的key的集合。
　　initProps初始化给instance实例的props和attrs，并对props最外层数据做响应式。
　　initSlot初始化给instance实例的slots为响应的vnode
　　setupStatefulComponent先对组件名、子组件名以及指令进行预判，给instance添加给accessCache、proxy属性，执行setup方法，然后给instance添加render函数（与vue2相同，去组件的render函数或者编译template生成），最后是一些兼容2.x的操作。
　　最后是setupRenderEffect方法，根据instance.isMounted属性判断是首次渲染还是更新，执行patch --> processElement --> mountElement，呈现视图。