vue-create-api 源码分析

vue-create-api 是 cube-ui 的内置库，笔者有幸提过pr，且对这个单独库有较多的实践，深感此库的使用价值，代码设计也比较巧妙，故作此文，加深记忆

先看一下，整体的文件结构，非常清晰

入口 index.js

在 install 方法的核心部分中，直接会给 VueConstructor 添加一个 createAPI 方法，然后会给 Vue.prototype 添加实例方法

Vue.createAPI = function (Component, events, single) {
  if (isBoolean(events)) {
    single = events;
    events = [];
  }
  const api = apiCreator.call(this, Component, events, single);
  const createName = processComponentName(Component, {
    componentPrefix,
    apiPrefix,
  });
  Vue.prototype[createName] = Component.$create = api.create;
  return api;
};

createAPI 的 interface 如下，可发现，他接受一个 VueComponent, 可选参数 events, 和是否单例 single（默认单例）

declare module 'vue/types/vue' {
  export interface VueConstructor {
    createAPI: (Component: Component, events?: string[], single?: boolean) => Api
  }
}

核心方法 creator.js

这里是核心方法，this.$createComponent 的函数体。这里先判断 renderFn 和是否单例；然后判断他有没有 $on 方法（判断 this 是不是 Vue 实例？）。然后执行 parseRenderData 方法格式化 $events 和 $props

create(config, renderFn, _single) {
  if (!isFunction(renderFn) && isUndef(_single)) {
    _single = renderFn
    renderFn = null
  }

  if (isUndef(_single)) {
    _single = single
  }

  const ownerInstance = this
  const isInVueInstance = !!ownerInstance.$on
  let options = {}

  if (isInVueInstance) {
    // Set parent to store router i18n ...
    options.parent = ownerInstance
    if (!ownerInstance.__unwatchFns__) {
      ownerInstance.__unwatchFns__ = []
    }
  }

  const renderData = parseRenderData(config, events)

  // 这里的 renderData = { props, on }
  // props 是 config 去掉 onEvent 的

  let component = null

  processProps(ownerInstance, renderData, isInVueInstance, (newProps) => {
    component && component.$updateProps(newProps)
  })
  processEvents(renderData, ownerInstance)
  process$(renderData)

  // 这里开始 构建组件，传入的 renderData 是经过处理的 config
  component = createComponent(renderData, renderFn, options, _single)

  // 如果是实例本身监听 hooks 执行 remove 操作
  if (isInVueInstance) {
    ownerInstance.$on(eventBeforeDestroy, beforeDestroy)
  }

  function beforeDestroy() {
    cancelWatchProps(ownerInstance)
    component.remove()
    component = null
  }

  return component
}

这是 $createComponent 的 interface，接受 options 参数和可选参数

export interface createFunction<V extends Vue> {
  (options: object, renderFn: renderFunction, single?: boolean):V
  (options: object, renderFn?: renderFunction):V
  (options: object, single?: renderFunction):V
}

createComponent 函数是组装 component 的核心方法

它接收 4 个参数， renderData 就是经过处理的 config， renderFn 就是用户传入的 renderFn ， options 是一个对象记录这个 api 组件的调用的 父组件（就是你在哪个组件调用 this.$createComponent 的那个组件），single 是否单例

function createComponent(renderData, renderFn, options, single) {
  beforeHooks.forEach(before => {
    before(renderData, renderFn, single);
  });
  // 记录所有者组件 uid 这个是由 Vue 自己生成的
  const ownerInsUid = options.parent ? options.parent._uid : -1;
  // 用外部变量单例， 其实是外层的函数 apiCreator 的闭包变量
  const { comp, ins } = singleMap[ownerInsUid] ? singleMap[ownerInsUid] : {};
  if (single && comp && ins) {
    ins.updateRenderData(renderData, renderFn);
    ins.$forceUpdate();
    currentSingleComp = comp;
    return comp;
  }
  const component = instantiateComponent(
    Vue,
    Component,
    renderData,
    renderFn,
    options
  );
  const instance = component.$parent;
  const originRemove = component.remove;

  // 定义 remove 方法
  component.remove = function () {
    if (single) {
      if (!singleMap[ownerInsUid]) {
        return;
      }
      singleMap[ownerInsUid] = null;
    }
    originRemove && originRemove.call(this);
    instance.destroy();
  };

  // 定义 show 方法
  const originShow = component.show;
  component.show = function () {
    originShow && originShow.call(this);
    return this;
  };

  // 定义 hide 方法
  const originHide = component.hide;
  component.hide = function () {
    originHide && originHide.call(this);
    return this;
  };

  // apiCreator 的闭包变量 singleMap ，currentSingleComp
  if (single) {
    singleMap[ownerInsUid] = {
      comp: component,
      ins: instance,
    };
    currentSingleComp = comp;
  }
  return component;
}

instantiateComponent 函数，初始化 component ，让 component 出现在页面上

使用 new Vue 来构造一个组件包裹实例，然后 mount 到 body 最底部

export default function instantiateComponent(
  Vue,
  Component,
  data,
  renderFn,
  options
) {
  let renderData;
  let childrenRenderFn;

  const instance = new Vue({
    ...options,
    render(createElement) {
      let children = childrenRenderFn && childrenRenderFn(createElement);
      if (children && !Array.isArray(children)) {
        children = [children];
      }

      return createElement(Component, { ...renderData }, children || []);
    },
    methods: {
      init() {
        document.body.appendChild(this.$el);
      },
      destroy() {
        this.$destroy();
        document.body.removeChild(this.$el);
      },
    },
  });
  instance.updateRenderData = function (data, render) {
    renderData = data;
    childrenRenderFn = render;
  };
  instance.updateRenderData(data, renderFn);
  instance.$mount();
  instance.init();
  const component = instance.$children[0];
  component.$updateProps = function (props) {
    Object.assign(renderData.props, props);
    instance.$forceUpdate();
  };
  return component;
}