【Vue3.0】- 如何渲染组件

组件

组件是一个抽象的概念，它是对一棵 DOM 树的抽象
可以描述组件信息的JavaScript对象
从表现上来看
- 组件的模板决定了组件生成的DOM标签
- 在Vue.js内部，一个组件想要真正的渲染生成DOM
  
  image.png

应用程序初始化

整个组件树是由根组件开始渲染的
为了找到根组件的渲染入口，从应用程序的初始化过程开始分析
对比vue2.0、vue3.0入口

// 在 Vue.js 2.x 中，初始化一个应用的方式如下
import Vue from 'vue'
import App from './App'
const app = new Vue({
  render: h => h(App)
})
app.$mount('#app')

// 在 Vue.js 3.0 中，初始化一个应用的方式如下
import { createApp } from 'vue'
import App from './app'
const app = createApp(App)
app.mount('#app')

在 Vue.js 3.0中导入了一个createApp，这是个入口函数，它是 Vue.js对外暴露的一个函数

createApp内部实现

const createApp = ((...args) => {
  // 创建 app 对象
  const app = ensureRenderer().createApp(...args)
  const { mount } = app
  // 重写 mount 方法
  app.mount = (containerOrSelector) => {
    // ...
  }
  return app
})

createApp主要做了两件事情
- 1）创建app对象
- 2）重写app.mount方法

创建app对象

ensureRenderer().createApp() 来创建 app 对象
实现了跨平台渲染

const app = ensureRenderer().createApp(...args)

ensureRenderer()用来创建一个渲染器对象

ensureRenderer 内部实现

// 渲染相关的一些配置，比如更新属性的方法，操作 DOM 的方法
const rendererOptions = {
  patchProp,
  ...nodeOps
}
let renderer
// 延时创建渲染器，当用户只依赖响应式包的时候，可以通过 tree-shaking 移除核心渲染逻辑相关的代码
function ensureRenderer() {
  return renderer || (renderer = createRenderer(rendererOptions))
}
function createRenderer(options) {
  return baseCreateRenderer(options)
}
function baseCreateRenderer(options) {
  function render(vnode, container) {
    // 组件渲染的核心逻辑
  }
  return {
    render,
    createApp: createAppAPI(render)
  }
}
function createAppAPI(render) {
  // createApp createApp 方法接受的两个参数：根组件的对象和 prop
  return function createApp(rootComponent, rootProps = null) {
    const app = {
      _component: rootComponent,
      _props: rootProps,
      mount(rootContainer) {
        // 创建根组件的 vnode
        const vnode = createVNode(rootComponent, rootProps)
        // 利用渲染器渲染 vnode
        render(vnode, rootContainer)
        app._container = rootContainer
        return vnode.component.proxy
      }
    }
    return app
  }
}

首先用ensureRenderer()来延时创建渲染器
- 好处是当用户只依赖响应式包的时候，就不会创建渲染器
- 可以通过tree-shaking的方式移除核心渲染逻辑相关的代码
通过createRenderer创建一个渲染器
- 这个渲染器内部会有一个createApp方法
  - 它是执行createAppAPI方法返回的函数
  - 接受了rootComponent和rootProps两个参数
- 我们在应用层面执行createApp(App)方法时：
  - 会把App组件对象作为根组件传递给rootComponent。
  - 这样，createApp内部就创建了一个app对象
  - 它会提供mount方法，这个方法是用来挂载组件的。

值得注意的是

app对象创建过程中，Vue.js利用闭包和函数柯里化的技巧，很好地实现了参数保留

重写app.mount方法

为什么重写？

createApp返回的app对象已经拥有了mount方法了，为什么还有在入口重写？
- 为了支持跨平台渲染
- createApp函数内部的app.mount方法是一个标准的可跨平台的组件渲染流程：

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

主要流程是，先创建vnode，再渲染 vnode
参数rootContainer根据平台不同而不同，
这里面的代码不应该包含任何特定平台相关的逻辑，因此我们需要在外部重写这个方法

app.mount 重写都做了哪些事情？

app.mount = (containerOrSelector) => {
  // 标准化容器
  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
  }
  // 挂载前清空容器内容
  container.innerHTML = ''
  // 真正的挂载
  return mount(container)
}

首先是通过normalizeContainer标准化容器（这里可以传字符串选择器或者DOM对象，但如果是字符串选择器，就需要把它转成 DOM对象，作为最终挂载的容器）
然后做一个if判断，如果组件对象没有定义render函数和 template模板，则取容器的innerHTML作为组件模板内容
接着在挂载前清空容器内容，最终再调用app.mount的方法走标准的组件渲染流程

优势

跨平台实现
兼容vue2.0写法
app.mount既可以传dom，又可以传字符串选择器

核心渲染流程：创建 vnode 和渲染 vnode

创建 vnode

1、 vnode本质上是用来描述DOM的JavaScript对象

它在Vue.js中可以描述不同类型的节点，比如普通元素节点、组件节点等

vnode如何描述

// vnode 这样表示<button>标签
const vnode = {
  type: 'button',
  props: { 
    'class': 'btn',
    style: {
      width: '100px',
      height: '50px'
    }
  },
  children: 'click me'
}

type属性表示DOM的标签类型
props属性表示DOM的一些附加信息，比如style、class等
children属性表示DOM的子节点，它也可以是一个vnode数组，只不过vnode可以用字符串表示简单的文本
2、 vnode除了用于描述一个真实的DOM，也可以用来描述组件

vnode其实是对抽象事物的描述

// vnode 这样表示 <custom-component>
const CustomComponent = {
  // 在这里定义组件对象
}
const vnode = {
  type: CustomComponent,
  props: { 
    msg: 'test'
  }
}

3、其他的，还有纯文本vnode，注释vnode
4、Vue.js 3.0中，vnode的type，做了更详尽的分类，包括 Suspense、Teleport等，且把vnode的类型信息做了编码，以便在后面的patch阶段，可以根据不同的类型执行相应的处理逻辑

vode优势

抽象
跨平台
但是，和手动修改dom对比，并不一定有优势

如何创建vnode

app.mount函数的实现，内部是通过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
}

对props做标准化处理
对vnode的类型信息编码
创建vnode对象
标准化子节点children

渲染 vnode

render(vnode, rootContainer)
const render = (vnode, container) => {
  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函数

const patch = (n1, n2, 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 Text:
      // 处理文本节点
      break
    case Comment:
      // 处理注释节点
      break
    case Static:
      // 处理静态节点
      break
    case Fragment:
      // 处理 Fragment 元素
      break
    default:
      if (shapeFlag & 1 /* ELEMENT */) {
        // 处理普通 DOM 元素
        processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      }
      else if (shapeFlag & 6 /* COMPONENT */) {
        // 处理组件
        processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
      }
      else if (shapeFlag & 64 /* TELEPORT */) {
        // 处理 TELEPORT
      }
      else if (shapeFlag & 128 /* SUSPENSE */) {
        // 处理 SUSPENSE
      }
  }
}

这个函数有两个功能：
- 一个是根据vnode挂载DOM
- 一个是根据新旧vnode更新DOM。对于初次渲染
patch函数入参
- 第一个参数 n1 表示旧的 vnode，当 n1 为 null 的时候，表示是一次挂载的过程；
- 第二个参数 n2 表示新的 vnode 节点，后续会根据这个 vnode 类型执行不同的处理逻辑；
- 第三个参数container表示 DOM 容器，也就是 vnode 渲染生成 DOM 后，会挂载到 container 下面。

渲染节点

对组件的处理
对普通DOM元素的处理

对组件的处理

processComponent函数实现

用来处理组件

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

如果n1为null，则执行挂载组件的逻辑
否则执行更新组件的逻辑

mountComponent挂载组件的实现

const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
  // 创建组件实例
  const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense))
  // 设置组件实例
  setupComponent(instance)
  // 设置并运行带副作用的渲染函数
  setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized)
}

主要做三件事情

1、创建组件实例
- Vue.js 3.0虽然不像Vue.js 2.x那样通过类的方式去实例化组件，但内部也通过对象的方式去创建了当前渲染的组件实例
2、设置组件实例
- instance保留了很多组件相关的数据，维护了组件的上下文，包括对props、插槽，以及其他实例的属性的初始化处理
3、设置并运行带副作用的渲染函数（setupRenderEffect)

const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
  // 创建响应式的副作用渲染函数
  instance.update = effect(function componentEffect() {
    if (!instance.isMounted) {
      // 渲染组件生成子树 vnode
      const subTree = (instance.subTree = renderComponentRoot(instance))
      // 把子树 vnode 挂载到 container 中
      patch(null, subTree, container, anchor, instance, parentSuspense, isSVG)
      // 保留渲染生成的子树根 DOM 节点
      initialVNode.el = subTree.el
      instance.isMounted = true
    }
    else {
      // 更新组件
    }
  }, prodEffectOptions)
}

该函数利用响应式库的effect函数创建了一个副作用渲染函数 componentEffect

副作用
当组件的数据发生变化时，effect函数包裹的内部渲染函数 componentEffect会重新执行一遍，从而达到重新渲染组件的目的

渲染函数内部也会判断这是一次初始渲染还是组件更新，在初始渲染流程中

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

1、渲染组件生成subTree
注意，不要弄混subTree（执行renderComponentRoot生成的子树vnode）和initialVNode（组件 vnode）
- 每个组件都有render函数，template也会编译成render函数
- renderComponentRoot函数就是去执行 render 函数创建整个组件树内部的 vnode，
- 把这个 vnode 再经过内部一层标准化，就得到了该函数的返回结果：subTree（子树vnode）
2、把subTree挂载到container中
- 继续调用 patch 函数把子树 vnode 挂载到 container 中
- 继续对这个子树vnode类型进行判断，此时子树vnode为普通元素vnode

对普通 DOM 元素的处理

processElement函数

用来处理普通DOM 元素

const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
  isSVG = isSVG || n2.type === 'svg'
  if (n1 == null) {
    //挂载元素节点
    mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
  }
  else {
    //更新元素节点
    patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized)
  }
}

如果n1 为 null，走挂载元素节点的逻辑
否则走更新元素节点逻辑

mountElement 函数

const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
  let el
  const { type, props, shapeFlag } = vnode
  // 创建 DOM 元素节点
  el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is)
  if (props) {
    // 处理 props，比如 class、style、event 等属性
    for (const key in props) {
      if (!isReservedProp(key)) {
        hostPatchProp(el, key, null, props[key], isSVG)
      }
    }
  }
  if (shapeFlag & 8 /* TEXT_CHILDREN */) {
    // 处理子节点是纯文本的情况
    hostSetElementText(el, vnode.children)
  }
  else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {
    // 处理子节点是数组的情况
    mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || !!vnode.dynamicChildren)
  }
  // 把创建的 DOM 元素节点挂载到 container 上
  hostInsert(el, container, anchor)
}

主要做四件事
1、创建DOM元素节点
通过hostCreateElement方法创建，这是一个平台相关的方法，在web端实现：

// 调用了底层的 DOM API document.createElement 创建元素
function createElement(tag, isSVG, is) {
  isSVG ? document.createElementNS(svgNS, tag)
    : document.createElement(tag, is ? { is } : undefined)
}

2、处理props
给这个DOM节点添加相关的 class、style、event 等属性，并做相关的处理
3、处理children
- 子节点是纯文本，则执行hostSetElementText方法，它在 Web环境下通过设置DOM元素的textContent属性设置文本：

function setElementText(el, text) {
  el.textContent = text
}

* 如果子节点是数组，则执行`mountChildren`方法

const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {
  for (let i = start; i < children.length; i++) {
    // 预处理 child
    const child = (children[i] = optimized
      ? cloneIfMounted(children[i])
      : normalizeVNode(children[i]))
    // 递归 patch 挂载 child
    patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
  }
}

遍历children获取到每一个child vnode
mountChildren函数的第二个参数是container，传入的是mountElement时创建的DOM节点，很好的建立了父子关系
通过递归patch这种深度优先遍历树的方式，我们就可以构造完整的DOM树，完成组件的渲染。
4、挂载DOM元素到container上
调用hostInsert方法

function insert(child, parent, anchor) {
  if (anchor) {
    parent.insertBefore(child, anchor)
  }
  else {
    parent.appendChild(child)
  }
}

嵌套组件的处理

mountChildren的时候递归执行的是 patch 函数，而不是 mountElement函数，这是因为子节点可能有其他类型的vnode，比如组件vnode

组件渲染流程图

image.png

【Vue3.0】- 如何渲染组件

组件

应用程序初始化

createApp内部实现

创建app对象

ensureRenderer 内部实现

重写app.mount方法

为什么重写？

app.mount 重写都做了哪些事情？

核心渲染流程：创建 vnode 和渲染 vnode

创建 vnode

vnode如何描述

vode优势

如何创建vnode

createVNode 函数的大致实现

渲染 vnode

patch函数

渲染节点

对组件的处理

processComponent函数实现

mountComponent挂载组件的实现

对普通 DOM 元素的处理

processElement函数

mountElement 函数

嵌套组件的处理

组件渲染流程图

推荐阅读更多精彩内容