【vue3源码解析】createApp [原创]

2021-04-07

vue-next仓库

vue-next仓库源码

https://github.com/vuejs/vue-next

克隆下来之后yarn install安装依赖，这里推荐webstorm进行运行调试，查看packages/runtime-core文件夹

调试

packages/runtime-core/__tests__/apiCreateApp.spec.ts调试单测文件，
跳转到packages/runtime-core/src/renderer.ts文件

createApp

该函数创建了一个实例。

// packages/runtime-test/src/index.ts
export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
  return baseCreateRenderer<HostNode, HostElement>(options)
}
// ...
const { render: baseRender, createApp: baseCreateApp } = createRenderer(
  extend({ patchProp }, nodeOps)
)

createRenderer接受一个合并后的属性的属性，返回一个baseCreateRenderer，而实现baseCreateRenderer就在packages/runtime-core/src/renderer.ts文件中，该文件长达2400行。
下面是该文件的源码缩略：

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)
  }
}

这个方法正是返回了createApp的实现函数。

defineComponent

packages/runtime-core/src/apiDefineComponent.ts进行了一个类型重载。对该文件翻译后。

// 实现，关闭一些无用的操作
export function defineComponent(options: unknown) {
  return isFunction(options) ? { setup: options, name: options.name } : options
}

defineComponent是一个工具，在声明组件时主要用于类型推断。类型推断在组件选项中提供(作为参数提供)。返回值具有TSX /手动渲染函数/ IDE支持的人工类型。

借用掘金: 江米小枣tonylua 的话来说

在结合了 TypeScript 的情况下，传统的 Vue.extends 等定义方法无法对此类组件给出正确的参数类型推断，这就需要引入 defineComponent() 组件包装函数，其在 rfc 文档中的说明为：(参考顺藤摸瓜🍉：用单元测试读懂 vue3 中的 defineComponent)

mount

待更新…