vue3源码阅读【packages\runtime-dom\src\index.ts】【createApp】

很简单的人

已于 2022-07-14 15:42:06 修改

阅读量242

点赞数

分类专栏： vue3源码 runtime-dom\src\index.ts 文章标签： javascript 前端 vue.js

于 2022-07-14 14:52:01 首次发布

本文链接：https://blog.csdn.net/qq_38862234/article/details/125777690

版权

vue3源码同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

runtime-dom\src\index.ts

5 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue应用创建过程，包括`createApp`、`renderer`的初始化和复用，以及`createRenderer`、`createAppAPI`等关键函数的作用。通过`ensureRenderer`确保渲染器的创建和利用，`createAppAPI`利用函数科里化实现组件挂载的定制。同时，文章探讨了`mount`方法的重写和上下文对象的创建，揭示了Vue框架内部的工作原理。

摘要由CSDN通过智能技术生成

createApp

首先会在js文件下定义一个变量 renderer 用于存储初始化的 Renderer 对象，
renderer || createRenderer() 这种用法可以保证 renderer 创建后重复利用。
ensureRenderer：之所以将 renderer 初始化的功能重新定义一个方法，有利于在 render 函数和 createApp 函数多次调用
rendererOptions：创建 renderer 对象的配置参数来源于 patchProp 和 nodeOps
baseCreateRenderer：返回带有 render 和 createApp 等的一个对象
createAppAPI：这里利用了函数科里化的思想，属于闭包的一种，执行 createAppAPI 获取参数 render 等，然后直接返回函数 createApp ，在执行 createApp 时接收参数 rootComponent 。
createAppContext：执行createAppContext 获取contenxt对象，然后设置app._context= contenxt并返回app对象。
getGlobalThis： getGlobalThis
createApp：执行完成后会重写 app.mount 并返回app对象


let renderer: Renderer<Element | ShadowRoot> | HydrationRenderer

...
export const createApp = ((...args) => {
  const app = ensureRenderer().createApp(...args)
...
  const { mount } = app
    app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
    ...
    return app
    }
...
...
function ensureRenderer() {
  return (
    renderer ||
    (renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions))
  )
}
...
const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps)
 
...
...
export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
  return baseCreateRenderer<HostNode, HostElement>(options)
}
...
...
function baseCreateRenderer(
  options: RendererOptions,
  createHydrationFns?: typeof createHydrationFunctions
): any {
...

  return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate)
  }
...
...
export function createAppAPI<HostElement>(
  render: RootRenderFunction,
  hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {
  return function createApp(rootComponent, rootProps = null) {
    if (!isFunction(rootComponent)) {
      rootComponent = { ...rootComponent }
    }
    ...
    const context = createAppContext()

    const app: App = (context.app = {
      _uid: uid++,
      _component: rootComponent as ConcreteComponent,
      _props: rootProps,
      _container: null,
      _context: context,
      _instance: null,
      ...
      use...
      mixin...
      component...
      directive...
      mount...
      unmount...
      provide...
      }
      return app;
...