vue3源码 - 渲染render(二)

前言

本篇是续 vue3源码 - 渲染render(一)之后的第二篇, 此篇主要是讲creatApp 和 mount是如何创建app 和 挂载app

creatApp 与 mount

我们可以知道runtime-dom中主要是存储了大量的操作dom的api

// runtime-dom/index.ts
import { createRender } from '@vue/runtime-core'  // 创建渲染的方法
import { extend } from '@vue/shared' // 工具方法

import { nodeOps } from './nodeOps' // 节点操作
import { patchProp } from './patchProp' // 属性操作

// 渲染时用到的所有方法(俩这结合)
const renderOptions = extend({ patchProp }, nodeOps)

// 举例
/* let App = {
  props: {},
  render(h){
    h('div', vvv)
  }
}
let app = createApp(App)
app.mount()
*/
// vue中runtime-core提供了核心的方法, 用来处理渲染, 他会使用runtime-dom中的api进行渲染
export function createApp(rootComponent, rootProps) {
  const app = createRender(renderOptions).createApp(rootComponent, rootProps) // 创建app还是通过这个createApp这实现的
  let { mount } = app // 真正的挂载方法
  app.mount = function (container) {   // 这里执行的是app.mount(container)然后会走下面逻辑
    container = nodeOps.querySelector(container) // 获取到dom元素
    container.innerHTML = ''
    mount(container) // 这个mount 是createAppAPI返回函数app的mount方法 往下看
  }
  return app
}

export {
  renderOptions
}

export * from '@vue/runtime-core'

我们在createApp实际调用的是createRender中的 createApp方法, 而mount方法也是在那边实现的,接下来我们看看这个createApp方法吧

// runtime-core/render.ts
export function createRender(renderOptions) {
    const render = (vnode, container) => {
        // core的核心, 根据不同的虚拟节点,创建对应的真实元素
        patch(null, vnode, container)
      }
   return {
       createApp: createAppAPI(render)
   }
}

这里的createApp又调用了 createAppAPI方法, 接下来我们看一下createAppAPI方法内部实现了什么?

// runtime-core/apiCreateApp
import { createVNode } from "./vnode" // 创建虚拟节点
export function createAppAPI(render) {
  return function createApp(rootComponent, rootProps) {
    const app = {
      _props: rootProps,
      _component: rootComponent,
      _container: null,
      mount(container) { // 挂载
        // 根据组件创建虚拟节点
         const vnode = createVNode(rootComponent, rootProps)
        // 将虚拟节点和容器获取后调用render方法进行渲染
        render(vnode, container)
        app._container = container
      }
    }
    return app
  }
}

本篇的creatApp 和 mount到这里已经结束了

总结

creatApp的主要作用是传递需要创建的节点信息
mount主要作用是创建好虚拟节点, 然后通过render将虚拟节点转化为真实节点,最后进行挂载