Vue3源码解析计划之组件渲染，VNode如何转为真实DOM-vue vnode渲染

[[439941]]

1写在前面

在VUE中，组件是一个非常重要的概念，整个应用的页面都是通过组件进行渲染实现的，但是我们在编写组件时，它们内部又是如何进行工作的呢?从我们开始编写组件，到最终转为真实DOM，是一个怎样的转变过程呢?那么我们应该先来了解vue3中组件时如何渲染的?

2组件

组件是一个抽象概念，它是对一棵DOM树的抽象，在页面写一个组件节点：，它并不会在页面上渲染这个叫的标签。我们在写组件时，应该内部时这样的：

<template> 
    <div class="test"> 
    <p>hello world</p> 
  </div>   
</template>

那么，一个组件想要真正渲染成DOM需要以下几个步骤:

创建VNode
渲染VNode
生成真实DOM

这里的VNode是什么，其实就是能够描述组件信息的Javascript对象。

3应用程序初始化

一个组件可以通过"模板+对象描述"的方式创建组件，创建好后又是如何被调用并进行初始化的呢?

因为整个组件树是从根组件开始进行渲染的，要寻找到根组件的渲染入口，需要从应用程序的初始化过程开始分析。

我们分别看下vue2和vue3初始化应用代码有啥区别，但其实没多大区别。

//vue2  
import Vue from "vue"; 
import App from "./App"; 
 
const app = new Vue({ 
    render:h=>h(App); 
}) 
 
app.$mount("#app"); 
 
//vue3 
import {createApp} from "vue"; 
import App from "./app"; 
const app = createApp(App); 
app.mount("#app");

接下来我们看看createApp内部实现：

export const createApp = ((...args) => { 
  //创建app对象 
  const app = ensureRenderer().createApp(...args) 
 
  if (__DEV__) { 
    injectNativeTagCheck(app) 
  } 
 
  const { mount } = app 
    //重写mount方法 
  app.mount = (containerOrSelector: Element | 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) 
    container.removeAttribute('v-cloak') 
    return proxy 
  } 
 
  return app 
}) as CreateAppFunction<Element>

我们看到const app = ensureRenderer().createApp(...args)用来创建app对象，那么其内部是如何实现的：

//渲染相关的一些配置，比如：更新属性的方法，操作DOM的方法 
const rendererOptions = { 
  patchProp,  // 处理 props 属性  
  ...nodeOps // 处理 DOM 节点操作 
} 
 
// lazy create the renderer - this makes core renderer logic tree-shakable 
// in case the user only imports reactivity utilities from Vue. 
 
let renderer: Renderer | HydrationRenderer 
 
let enabledHydration = false 
// 我们看到中文翻译就是：延时创建渲染器，当用户只依赖响应式包的时候，不会立即创建渲染器， 
// 可以通过tree-shakable移除核心渲染逻辑相关的代码 
function ensureRenderer() { 
  return renderer || (renderer = createRenderer(rendererOptions)) 
}

渲染器，这是为了跨平台渲染做准备的，简单理解就是：包含平台渲染逻辑的js对象。我们看到创建渲染器，是通过调用createRenderer来实现的，其通过调用baseCreateRenderer函数进行返回，其中就有我们要找的createApp: createAppAPI(render, hydrate)。

export function createRenderer< 
  HostNode = RendererNode, 
  HostElement = RendererElement 
>(options: RendererOptions<HostNode, HostElement>) { 
  return baseCreateRenderer<HostNode, HostElement>(options) 
} 
 
// 
function baseCreateRenderer( 
  options: RendererOptions, 
  createHydrationFns?: typeof createHydrationFunctions 
): any { 
  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 
 
  // ....此处省略两千行，我们先不管 
 
  return { 
    render, 
    hydrate, 
    createApp: createAppAPI(render, hydrate) 
  } 
}

我们看到createAppAPI(render, hydrate)方法接受两个参数：根组件渲染函数render，可选参数hydrate是在SSR场景下应用的，这里先不关注。

export function createAppAPI<HostElement>( 
  render: RootRenderFunction, 
  hydrate?: RootHydrateFunction 
): CreateAppFunction<HostElement> { 
  //createApp方法接受的两个参数：根组件的对象和prop 
  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 
    } 
 
    // 创建默认APP配置 
    const context = createAppContext() 
    const installedPlugins = new Set() 
 
    let isMounted = false 
 
    const app: App = { 
      _component: rootComponent as Component, 
      _props: rootProps, 
      _container: null, 
      _context: context, 
 
      get config() { 
        return context.config 
      }, 
 
      set config(v) { 
        if (__DEV__) { 
          warn( 
            `app.config cannot be replaced. Modify individual options instead.` 
          ) 
        } 
      }, 
 
      // 都是一些眼熟的方法 
      use() {}, 
      mixin() {}, 
      component() {}, 
      directive() {}, 
      //用于挂载组件 
      mount(rootContainer){ 
        //创建根组件的VNode 
        const vnode = createVNode(rootComponent,rootProps); 
        //利用渲染器渲染VNode 
        render(vnode,rootContainer); 
        app._container = rootComponent; 
        return vnode.component.proxy; 
      } 
 
      // ... 
    } 
     
     
    return app 
  } 
}

在整个app对象的创建过程中，vue.js利用闭包和函数柯里化的技巧，很好的实现参数保留。如：在执行app.mount的时候，不需要传入渲染器render，因为在执行createAppAPI的时候，渲染器render参数已经被保留下来。

我们知道在vue源码中已经将mount方法已经进行封装，但是在我们使用时为什么还要进行重写，而不是直接把相关逻辑放在app对象的mount方法内部实现呢?

重写的目的是：实现既能让用户在使用API时更加灵活，也可以兼容Vue2的写法。

这是因为vue.js不仅仅是为web平台服务的，其设计的目标是"星辰大海"--实现支持跨平台渲染，内部不能够包含任何指定平台的内容，createApp函数内部的app.mount方法是一个标准的可跨平台的组件渲染流程：先创建VNode，再渲染VNode。

mount(rootContainer){ 
  //创建根组件的VNode 
  const vnode = createVNode(rootComponent,rootProps); 
  //利用渲染器渲染VNode 
  render(vnode,rootContainer); 
  app._container = rootComponent; 
  return vnode.component.proxy; 
}

我们看到app.mount重写的代码如下：

//重写mount方法 
app.mount = (containerOrSelector: Element | string): any => { 
  //标准化容器 
  const container = normalizeContainer(containerOrSelector) 
  //如果容器为空对象，就直接返回呢 
  if (!container) return 
  const component = app._component 
  //如果组件对象没有定义render函数和template模板，则直接取出容器的innerHTML方法作为组件模板内容 
  if (!isFunction(component) && !component.render && !component.template) { 
    component.template = container.innerHTML 
  } 
  //在挂载前清空容器内容 clear content before mounting 
  container.innerHTML = '' 
  //实现真正的挂载 
  const proxy = mount(container) 
  container.removeAttribute('v-cloak') 
  return proxy 
}

4核心渲染流程：创建VNode和渲染VNode

vnode本质上用来描述DOM的Javascript对象，它在vue中可以描述不同节点，比如：普通元素节点、组件节点等。

我们可以使用vnode来表示button标签：

type：标签的类型
props：标签的DOM属性信息
children：DOM的子节点，vnode数组

const vnode = { 
  //标签的类型 
 type:"button", 
  //标签的DOM属性信息 
  props:{ 
   "class":"btn", 
    style:{ 
     width:"100px", 
      height:"100px" 
    } 
  }, 
  //dom的子节点，vnode数组 
  children:"确认" 
}

那么，我们可以使用vnode来对抽象事物的描述，比如用来表示组件标签，页面并不会真正渲染一个叫做HelloWorld的标签元素，而是渲染组件内部定义的原生的HTML标签元素。

const HelloWorld = { 
 //定义组件对象信息 
} 
 
const vnode = { 
 type:HelloWorld, 
  props:{ 
   msg:"test" 
  } 
}

我们在想：vnode到底有什么优势，为什么一定要设计成vnode这样的数据结构?

抽象：引入vnode，可以将渲染过程抽象化，从而使得组件的抽象能力有所提升。
跨平台：因为patch vnode过程不同平台可以有自己的实现，给予vnode再做服务端渲染、weex平台、小程序平台的渲染。

但是呢，注意：使用vnode并不意味着不用操作真实DOM。很多人会误认为vnode的性能一定会比手动操作DOM好，但其实并不是一定的。这是因为：

基于vnode实现的MVVM框架，在每次render to vnode过程中，渲染组件会有一定的javascript耗时，尤其是大组件
当我们去更新组件时，可以感觉到明显的卡顿现象。虽然diff算法在减少DOM操作方面足够优秀，但最终还是免不了操作DOM，所以性能并不能说是绝对优势

创建VNode

我们前面捋了一遍源码，知道vue中是通过createVNode函数创建根组件的vnode的。

const vnode = createVNode(rootComponent,rootProps); 
 
//createVNode函数的大致实现流程 
function createVNode(type,props=null,children=null){ 
 if(props){ 
   //处理props的相关逻辑，标准化class和style 
  } 
  //对于vnode类型信息编码 
  const shapeFlag = isString(type)  
  ? 1/*ELEMENT*/ : isSuspense(type)  
  ? 128 /*SUSPENSE*/ : isTeleport(type) 
  ? 64 /*TELEPORT*/ : isObject(type) 
  ? 4 /*STATEFUL_COMPONENT*/ : isFunction(type) 
  ? 2 /*FUNCTIONAL_COMPONENT*/ : 0 
   
  const vnode = { 
   type, 
    props, 
    shapeFlag, 
    //其他属性 
  } 
   
  //标准化子节点，把不同数据类型的children转成数组或文本类型 
  normalizeChildren(vnode,children) 
  return vnode 
}

渲染VNode

render(vnode,rootContainer) 
function render(vnode,rootContainer){ 
 //判断是否为空 
  if(vnode == null){ 
    //如果为空，执行销毁组件的逻辑 
   if(container._vnode){ 
     unmount(container._vnode,null,null,true) 
    } 
  }else{ 
   //创建或更新组件 
    patch(container._vnode||null,vnode,container) 
  } 
  //缓存vnode节点，表示已经渲染 
  container._vnode = vnode 
}

那么在渲染vnode过程中涉及道到的patch补丁函数是如何实现的：

function patch( 
 n1,//旧的vnode，当n1==null时，表示时一次挂载的过程 
  n2,//新的vnode，后续会根据这个vnode类型执行不同的处理逻辑 
  container,//表示dom容器，在vnode渲染生成DOM后，会挂载到container下面 
  anchor=null, 
  parentComponent=null, 
  parentSuspense=null, 
  isSVG=false, 
  optimized=false 
){ 
 //如果存在新旧节点，且新旧节点类型不同，则销毁旧节点 
  if(n1&&!isSameVNodeType(n1,n2)){ 
   anchor = getNextHostNode(n1); 
    unmount(n1,parentComponent,parentSuspense,true); 
    n1 = null; 
  } 
  const {type,shapeFlag} = n2; 
    switch(type){ 
      case Test: 
        //处理文本节点 
       break 
      case Comment: 
        //处理注释节点 
        break 
      case Static: 
        //处理静态节点 
        break 
      case Fragment: 
        //处理Fragment元素 
        break 
      default: 
        if(shapeFlag & 1 /*ELEMENT*/){ 
         //处理普通DOM元素 
          processElemnt( 
            n1, 
            n2, 
            container, 
            anchor, 
            parentComponent, 
            parentSuspense, 
            isSVG, 
            optimized 
          ) 
        }else if(shapeFlag & 64 /*TELEPORT*/){ 
         //处理普通TELEPORT 
          processElemnt( 
            n1, 
            n2, 
            container, 
            anchor, 
            parentComponent, 
            parentSuspense, 
            isSVG, 
            optimized 
          ) 
        }else if(){ 
         
        }else if(){ 
         
        }else if(){ 
         
        } 
    } 
}

我们看下处理组件的parentComponent函数的实现：

function parentComponent( 
  n1, 
   n2, 
   container, 
   anchor, 
   parentComponent, 
   parentSuspense, 
   isSVG, 
   optimized 
){ 
 if(n1==null){ 
   //挂载组件 
    mountComponent( 
     n1, 
      n2, 
      container, 
      anchor, 
      parentComponent, 
      parentSuspense, 
      isSVG, 
      optimized 
    ) 
  }else{ 
   //更新组件 
    updateComponent( 
     n1, 
      n2, 
      parentComponent, 
      optimized 
    ) 
  }    
}

关于组件实例：

创建组件实例：内部通过对象的方式创建了当前渲染的组件实例
设置组件实例：instance保留了很多组件相关的数据，维护了组件的上下文，包括对props、插槽以及其他实例的属性的初始化处理

初始渲染主要做两件事情：

渲染组件生成subTree
把subTree挂载到container中

再回到我们梦开始的地方，我们看到在HelloWorld组件内部，整个DOM节点对应的vnode执行renderComponentRoot渲染生成对应的subTree，我们可以把它成为"子树vnode"。

<template> 
    <div class="test">//test被称为子树vnode 
    <p>hello world</p> 
  </div>   
</template>

如果是其它平台比如weex等，hostCreateElment方法就不再是操作DOM，而是平台相关的API，这些平台相关的方法是在创建渲染器阶段作为参数传入的。

创建完DOM节点后，要判断如果有props，就给这个DOM节点添加相关的class、style、event等属性，并在hostPatchProp函数内部做相关的处理逻辑。

5嵌套组件

在生产开发中，App和hello组件的例子就是嵌套组件的场景，组件vnode主要维护着组件的定义对象，组件上的各种props，而组件本身是一个抽象节点，它自身的渲染其实是通过执行组件定义的render函数渲染生成的子树vnode完成的，然后再通过patch这种递归方式，无论组件嵌套层级多深，都可以完成整个组件树的渲染。

6参考文章

《Vue3核心源码解析》
《Vue中文社区》
《Vue3中文文档》

7写在最后

本文主要分析总结了组件的渲染流程，从入口开始层层分析组件渲染过程的源码，我们知道了一个组件想要真正渲染成DOM需要以下三个步骤:

创建VNode
渲染VNode
生成真实DOM