likes
comments
collection
share

【vue3源码】十一、初始vue3中的渲染器

作者站长头像
站长
· 阅读数 28

【vue3源码】十一、初始vue3中的渲染器

在介绍渲染器之前。我们先简单了解下渲染器的作用是什么。

渲染器最主要的任务就是将虚拟DOM渲染成真实的DOM对象到对应的平台上，这里的平台可以是浏览器DOM平台，也可以是其他诸如canvas的一些平台。总之vue3的渲染器提供了跨平台的能力。

渲染器的生成

当使用createApp创建应用实例时，会首先调用一个ensureRenderer方法。

export const createApp = ((...args) => {
  const app = ensureRenderer().createApp(...args)
  // ...
  
  return app
}) as CreateAppFunction<Element>

ensureRenderer函数会返回一个渲染器renderer，这个renderer是个全局变量，如果不存在，会使用createRenderer方法进行创建，并将创建好的renderer赋值给这个全局变量。

function ensureRenderer() {
  return (
    renderer ||
    (renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions))
  )
}

createRenderer函数接收一个options参数，至于这个options中是什么，这里我们暂且先不深究。createRenderer函数中会调用baseCreateRenderer函数，并返回其结果。

export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
  return baseCreateRenderer<HostNode, HostElement>(options)
}

至此，我们就找到了真正创建渲染器的方法baseCreateRenderer。当我们找到baseCreateRenderer的具体实现，你会发现这个函数是十分长的，单baseCreateRenderer这一个函数就占据了2044行代码，其中更是声明了30+个函数。

在此我们先不用关心这些函数的作用，在后续介绍组件加载及更新过程时，你会慢慢了解这些函数。

接下来我们继续看渲染器对象的结构。

渲染器

return {
  render,
  hydrate,
  createApp: createAppAPI(render, hydrate)
}

在baseCreateRenderer最后返回了一个对象，这个对象包含了三个属性：render（渲染函数）、hydrate（同构渲染）、createApp。这里的createApp是不是很熟悉，在createApp中调用ensureRenderer方法后面会紧跟着调用了createApp函数：

export const createApp = ((...args) => {
  const app = ensureRenderer().createApp(...args)
  // ...
  
  return app
}) as CreateAppFunction<Element>

注意这里不要两个createApp混淆了。渲染器中的createApp并不是我们平时使用到的createApp。当我们调用createApp方法进行创建实例时，会调用渲染器中的createApp生成app实例。

接下来我们来看下渲染器中的createApp。首先createApp方法通过一个createAppAPI方法生成，这个方法接收渲染器中的render及hydrate：

export function createAppAPI<HostElement>(
  render: RootRenderFunction,
  hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {
  return function createApp(rootComponent, rootProps = null) {
    // ...
  }
}

createAppAPI函数会返回一个闭包函数createApp。这个createApp就是通过ensureRenderer().createApp(...args)调用的方法了。接下来看createApp的具体实现：

<details><summary>createApp完整代码</summary>

function createApp(rootComponent, rootProps = null) {
  if (!isFunction(rootComponent)) {
    rootComponent = { ...rootComponent }
  }

  if (rootProps != null && !isObject(rootProps)) {
    __DEV__ && warn(`root props passed to app.mount() must be an object.`)
    rootProps = null
  }

  const context = createAppContext()
  const installedPlugins = new Set()

  let isMounted = false

  const app: App = (context.app = {
    _uid: uid++,
    _component: rootComponent as ConcreteComponent,
    _props: rootProps,
    _container: null,
    _context: context,
    _instance: null,

    version,

    get config() {
      return context.config
    },

    set config(v) {
      if (__DEV__) {
        warn(
          `app.config cannot be replaced. Modify individual options instead.`
        )
      }
    },

    use(plugin: Plugin, ...options: any[]) {
      if (installedPlugins.has(plugin)) {
        __DEV__ && warn(`Plugin has already been applied to target app.`)
      } else if (plugin && isFunction(plugin.install)) {
        installedPlugins.add(plugin)
        plugin.install(app, ...options)
      } else if (isFunction(plugin)) {
        installedPlugins.add(plugin)
        plugin(app, ...options)
      } else if (__DEV__) {
        warn(
          `A plugin must either be a function or an object with an "install" ` +
            `function.`
        )
      }
      return app
    },

    mixin(mixin: ComponentOptions) {
      if (__FEATURE_OPTIONS_API__) {
        if (!context.mixins.includes(mixin)) {
          context.mixins.push(mixin)
        } else if (__DEV__) {
          warn(
            'Mixin has already been applied to target app' +
              (mixin.name ? `: ${mixin.name}` : '')
          )
        }
      } else if (__DEV__) {
        warn('Mixins are only available in builds supporting Options API')
      }
      return app
    },

    component(name: string, component?: Component): any {
      if (__DEV__) {
        validateComponentName(name, context.config)
      }
      if (!component) {
        return context.components[name]
      }
      if (__DEV__ && context.components[name]) {
        warn(`Component "${name}" has already been registered in target app.`)
      }
      context.components[name] = component
      return app
    },

    directive(name: string, directive?: Directive) {
      if (__DEV__) {
        validateDirectiveName(name)
      }

      if (!directive) {
        return context.directives[name] as any
      }
      if (__DEV__ && context.directives[name]) {
        warn(`Directive "${name}" has already been registered in target app.`)
      }
      context.directives[name] = directive
      return app
    },

    mount(
      rootContainer: HostElement,
      isHydrate?: boolean,
      isSVG?: boolean
    ): any {
      if (!isMounted) {
        // #5571
        if (__DEV__ && (rootContainer as any).__vue_app__) {
          warn(
            `There is already an app instance mounted on the host container.\n` +
              ` If you want to mount another app on the same host container,` +
              ` you need to unmount the previous app by calling \`app.unmount()\` first.`
          )
        }
        const vnode = createVNode(
          rootComponent as ConcreteComponent,
          rootProps
        )
        // store app context on the root VNode.
        // this will be set on the root instance on initial mount.
        vnode.appContext = context

        // HMR root reload
        if (__DEV__) {
          context.reload = () => {
            render(cloneVNode(vnode), rootContainer, isSVG)
          }
        }

        if (isHydrate && hydrate) {
          hydrate(vnode as VNode<Node, Element>, rootContainer as any)
        } else {
          render(vnode, rootContainer, isSVG)
        }
        isMounted = true
        app._container = rootContainer
        // for devtools and telemetry
        ;(rootContainer as any).__vue_app__ = app

        if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
          app._instance = vnode.component
          devtoolsInitApp(app, version)
        }

        return getExposeProxy(vnode.component!) || vnode.component!.proxy
      } else if (__DEV__) {
        warn(
          `App has already been mounted.\n` +
            `If you want to remount the same app, move your app creation logic ` +
            `into a factory function and create fresh app instances for each ` +
            `mount - e.g. \`const createMyApp = () => createApp(App)\``
        )
      }
    },

    unmount() {
      if (isMounted) {
        render(null, app._container)
        if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
          app._instance = null
          devtoolsUnmountApp(app)
        }
        delete app._container.__vue_app__
      } else if (__DEV__) {
        warn(`Cannot unmount an app that is not mounted.`)
      }
    },

    provide(key, value) {
      if (__DEV__ && (key as string | symbol) in context.provides) {
        warn(
          `App already provides property with key "${String(key)}". ` +
            `It will be overwritten with the new value.`
        )
      }

      context.provides[key as string | symbol] = value

      return app
    }
  })

  if (__COMPAT__) {
    installAppCompatProperties(app, context, render)
  }

  return app
}

</details>

这个createApp函数与vue提供的createApp一样，都接受一个根组件参数和一个rootProps（根组件的props）参数。

首先，如果根组件不是方法时，会将rootComponent使用解构的方式重新赋值为一个新的对象，然后判断rootProps如果不为null并且也不是个对象，则会将rootProps置为null。

if (!isFunction(rootComponent)) {
  rootComponent = { ...rootComponent }
}

if (rootProps != null && !isObject(rootProps)) {
  __DEV__ && warn(`root props passed to app.mount() must be an object.`)
  rootProps = null
}

然后调用createAppContext()方法创建一个上下文对象。

export function createAppContext(): AppContext {
  return {
    app: null as any,
    config: {
      // 一个判断是否为原生标签的函数
      isNativeTag: NO,
      performance: false,
      globalProperties: {},
      // 自定义options的合并策略
      optionMergeStrategies: {},
      errorHandler: undefined,
      warnHandler: undefined,
      // 组件模板的运行时编译器选项
      compilerOptions: {}
    },
    // 存储全局混入的mixin
    mixins: [],
    // 保存全局注册的组件
    components: {},
    // 保存注册的全局指令
    directives: {},
    // 保存全局provide的值
    provides: Object.create(null),
    // 缓存组件被解析过的options（合并了全局mixins、extends、局部mixins）
    optionsCache: new WeakMap(),
    // 缓存每个组件经过标准化的的props options
    propsCache: new WeakMap(),
    // 缓存每个组件经过标准化的的emits options
    emitsCache: new WeakMap()
  }
}

然后声明了一个installedPlugins集合和一个布尔类型的isMounted。其中installedPlugins会用来存储使用use安装的plugin，isMounted代表根组件是否已经挂载。

const installedPlugins = new Set()
let isMounted = false

紧接着声明了一个app变量，这个app变量就是app实例，在创建app的同时会将app添加到上下文中的app属性中。

const app: APP = (context.app = { //... })

然后会处理vue2的兼容。这里我们暂时不深究vue2的兼容处理。

if (__COMPAT__) {
  installAppCompatProperties(app, context, render)
}

最后返回app。至此createaApp执行完毕。

app应用实例

接下来我们看下app实例的构造:

const app: App = (context.app = {
  _uid: uid++,
  _component: rootComponent as ConcreteComponent,
  _props: rootProps,
  _container: null,
  _context: context,
  _instance: null,

  version,

  get config() { // ... },

  set config(v) { // ... },

  use(plugin: Plugin, ...options: any[]) { //... },

  mixin(mixin: ComponentOptions) { //... },

  component(name: string, component?: Component): any { //... },

  directive(name: string, directive?: Directive) { //... },

  mount(
    rootContainer: HostElement,
    isHydrate?: boolean,
    isSVG?: boolean
  ): any { //... },

  unmount() { //... },

  provide(key, value) { //... }
})
  • _uid：app的唯一标识，每次都会使用uid为新app的唯一标识，在赋值后，uid会进行自增，以便下一个app使用
  • _component：根组件
  • _props：根组件所需的props
  • _container：需要将根组件渲染到的容器
  • _context：app的上下文
  • _instance：根组件的实例
  • version：vue的版本

  • get config：获取上下文中的config

    get config() {
  return context.config
}

  • set config：拦截app.config的set操作，防止app.config被修改

    set config(v) {
  if (__DEV__) {
    warn(
      `app.config cannot be replaced. Modify individual options instead.`
    )
  }
}

app.use()

使用app.use方法安装plugin。对于重复安装多次的plugin，只会进行安装一次，这都依靠installedPlugins，每次安装新的plugin后，都会将plugin存入installedPlugins，这样如果再次安装同样的plugin，就会避免多次安装。

use(plugin: Plugin, ...options: any[]) {
  // 如果已经安装过plugin，则不需要再次安装
  if (installedPlugins.has(plugin)) {
    __DEV__ && warn(`Plugin has already been applied to target app.`)
  } else if (plugin && isFunction(plugin.install)) { // 如果存在plugin，并且plugin.install是个方法
    // 将plugin添加到installedPlugins
    installedPlugins.add(plugin)
    // 调用plugin.install
    plugin.install(app, ...options)
  } else if (isFunction(plugin)) { 如果plugin是方法
    // 将plugin添加到installedPlugins
    installedPlugins.add(plugin)
    // 调plugin
    plugin(app, ...options)
  } else if (__DEV__) {
    warn(
      `A plugin must either be a function or an object with an "install" ` +
        `function.`
    )
  }
  // 最后返回app，以便可以链式调用app的方法
  return app
}

app.mixin()

使用app.mixin进行全局混入，被混入的对象会被存在上下文中的mixins中。注意mixin只会在支持options api的版本中才能使用，在mixin中会通过__FEATURE_OPTIONS_API__进行判断，这个变量会在打包过程中借助@rollup/plugin-replace进行替换。

mixin(mixin: ComponentOptions) {
  if (__FEATURE_OPTIONS_API__) {
    if (!context.mixins.includes(mixin)) {
      context.mixins.push(mixin)
    } else if (__DEV__) {
      warn(
        'Mixin has already been applied to target app' +
          (mixin.name ? `: ${mixin.name}` : '')
      )
    }
  } else if (__DEV__) {
    warn('Mixins are only available in builds supporting Options API')
  }
  return app
}

app.component()

使用app.compoent全局注册组件，也可用来获取name对应的组件。被注册的组件会被存在上下文中的components中。

component(name: string, component?: Component): any {
  // 验证组件名是否符合要求
  if (__DEV__) {
    validateComponentName(name, context.config)
  }
  // 如果不存在component，那么会返回name对应的组件
  if (!component) {
    return context.components[name]
  }
  if (__DEV__ && context.components[name]) {
    warn(`Component "${name}" has already been registered in target app.`)
  }
  context.components[name] = component
  return app
}

app.directive()

注册全局指令，也可用来获取name对应的指令对象。注册的全局指令会被存入上下文中的directives中。

directive(name: string, directive?: Directive) {
  // 验证指令名称
  if (__DEV__) {
    validateDirectiveName(name)
  }
  // 如果不存在directive，则返回name对应的指令对象
  if (!directive) {
    return context.directives[name] as any
  }
  if (__DEV__ && context.directives[name]) {
    warn(`Directive "${name}" has already been registered in target app.`)
  }
  context.directives[name] = directive
  return app
}

app.mount()

此处的app.mount并不是我们平时使用到的mount。创建完渲染器，执行完渲染器的createApp后，会重写mount方法，我们使用的mount方法是被重写的mount方法。

mount(
  rootContainer: HostElement,
  isHydrate?: boolean,
  isSVG?: boolean
): any {
  // 如果未挂载，开始挂载
  if (!isMounted) {
    // 如果存在rootContainer.__vue_app__，说明容器中已经存在一个app实例了，需要先使用unmount进行卸载
    if (__DEV__ && (rootContainer as any).__vue_app__) {
      warn(
        `There is already an app instance mounted on the host container.\n` +
          ` If you want to mount another app on the same host container,` +
          ` you need to unmount the previous app by calling \`app.unmount()\` first.`
      )
    }
    // 创建根组件的虚拟DOM
    const vnode = createVNode(
      rootComponent as ConcreteComponent,
      rootProps
    )
    // 将上下文添加到根组件虚拟dom的appContext属性中
    vnode.appContext = context

    // HMR root reload
    if (__DEV__) {
      context.reload = () => {
        render(cloneVNode(vnode), rootContainer, isSVG)
      }
    }

    // 同构渲染
    if (isHydrate && hydrate) {
      hydrate(vnode as VNode<Node, Element>, rootContainer as any)
    } else {
      // 客户端渲染
      render(vnode, rootContainer, isSVG)
    }
    // 渲染完成后将isMounted置为true
    isMounted = true
    // 将容器添加到app的_container属性中
    app._container = rootContainer
    // 将rootContainer.__vue_app__指向app实例
    ;(rootContainer as any).__vue_app__ = app

    if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
      // 将根组件实例赋给app._instance
      app._instance = vnode.component
      devtoolsInitApp(app, version)
    }

    // 返回根组件expose的属性
    return getExposeProxy(vnode.component!) || vnode.component!.proxy
  } else if (__DEV__) { // 已经挂载了
    warn(
      `App has already been mounted.\n` +
        `If you want to remount the same app, move your app creation logic ` +
        `into a factory function and create fresh app instances for each ` +
        `mount - e.g. \`const createMyApp = () => createApp(App)\``
    )
  }
}

app.unmount()

卸载应用实例。

unmount() {
  // 如果已经挂载才能进行卸载
  if (isMounted) {
    // 调用redner函数，此时虚拟节点为null，代表会清空容器中的内容
    render(null, app._container)
    if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
      // 将app._instance置空
      app._instance = null
      devtoolsUnmountApp(app)
    }
    // 删除容器中的__vue_app__
    delete app._container.__vue_app__
  } else if (__DEV__) {
    warn(`Cannot unmount an app that is not mounted.`)
  }
}

app.provide()

全局注入一些数据。这些数据会被存入上下文对象的provides中。

provide(key, value) {
  if (__DEV__ && (key as string | symbol) in context.provides) {
    warn(
      `App already provides property with key "${String(key)}". ` +
        `It will be overwritten with the new value.`
    )
  }

  context.provides[key as string | symbol] = value

  return app
}

总结

vue3中的渲染器主要作用就是将虚拟DOM转为真实DOM渲染到对应平台中，在这个渲染过程中会包括DOM的挂载、DOM的更新等操作。

通过baseCreateRenderer方法会创建一个渲染器renderer，renderer中有三个方法：render、hydrate、createApp，其中render方法用来进行客户端渲染，hydrate用来进行同构渲染，createApp用来创建app实例。baseCreateRenderer中包含了大量的函数用来处理挂载组件、更新组件等操作。