Vue源碼探祕（九）（createComponent）

時間 2020-04-10

標籤 vue 源碼探祕 createcomponent 简体版

原文原文鏈接

引言

Vue.js 中的一個核心思想是組件化。所謂組件化，就是把頁面拆分紅多個組件 (component)，每一個組件依賴的 CSS、JavaScript、模板、圖片等資源放在一塊兒開發和維護。組件化思想容許咱們使用小型、獨立和一般可複用的組件構建大型應用。幾乎任意類型的應用界面均可以抽象爲一個組件樹，這裏參考官網的一張圖來講明： javascript

接下來的幾篇文章，我會帶你們一塊兒來看下組件化相關的源碼，瞭解這塊有助於咱們瞭解組件化的思想。html

本小節咱們先來看下createComponent函數的實現。vue

從一個簡單示例開始

回顧Vue 源碼探祕（五）（_render 函數的實現，咱們是這麼編寫render函數的：html5

new Vue({
  // 這裏的 h 是 createElement 方法
  render: function(h) {
    return h(
      "div",
      {
        attrs: {
          id: "app"
        }
      },
      this.message
    );
  }
});
複製代碼

而若是使用單文件組件，咱們須要這樣編寫render函數：java

import Vue from "vue";
import App from "./App.vue";

var app = new Vue({
  el: "#app",
  // 這裏的 h 是 createElement 方法
  render: h => h(App)
});
複製代碼

上面兩種編寫方式有什麼不一樣呢？很顯然兩種編寫render函數的方式都是經過 render 函數去渲染的，不一樣的是此次經過 createElement 傳的參數是一個組件而不是一個原生的標籤。下面咱們就結合上面這個例子開始分析。node

createComponent

回顧Vue 源碼探祕（七）（createElement），咱們在分析_createElement函數時，有這麼一段代碼：ios

// src/core/vdom/create-element.js

export function _createElement(): VNode | Array<VNode> {
// ...
  // ...

  if (typeof tag === "string") {
    // ...
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children);
  }

  // ...
}
複製代碼

這裏對參數 tag 進行了判斷，若是是一個普通的 html 標籤，像上一章的例子那樣是一個普通的 div，則會實例化一個普通 VNode 節點，不然經過 createComponent 方法建立一個組件 VNode。createComponent 函數定義在 src/core/vdom/create-component.js 中，咱們分段來分析：git

// src/core/vdom/create-component.js
export function createComponent(
 Ctor: Class<Component> | Function | Object | void,
 data: ?VNodeData,
 context: Component,
 children: ?Array<VNode>,
 tag?: string
): VNode | Array<VNode> | void {
  if (isUndef(Ctor)) {
    return;
  }

  const baseCtor = context.$options._base;

  // plain options object: turn it into a constructor
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor);
  }

  // ...
}
複製代碼

函數一開始將 vm.$option 的 _base 屬性賦給 baseCtor。在這裏 baseCtor 實際上就是 Vue，這個的定義是在最開始初始化 Vue 的階段，在 src/core/global-api/index.js 中的 initGlobalAPI 函數有這麼一段邏輯：github

// src/core/global-api/index.js

export function initGlobalAPI(Vue: GlobalAPI) {
  // ...

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue;

  // ...
}
複製代碼

能夠看到這裏定義的是Vue.options，而咱們在createComponent中取的是context.$options。這塊實際上是在src/core/instance/init.js裏 Vue 原型上的 _init 方法中處理的：web

// src/core/instance/init.js

Vue.prototype._init = function(options?: Object) {
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  );
};
複製代碼

這裏調用了mergeOptions函數，將Vue.options合併到vm.$options上，所以這裏就能夠經過vm.$options._base 拿到 Vue 構造函數。

回到createComponent函數，接下來判斷Ctor是否是對象。這裏的Ctor是指什麼呢？先來看一下咱們平時常常編寫的單文件組件：

<template>
// ...
</template>
<script>
export default {
 name: 'App'
}
</script>
複製代碼

Ctor 就是單文件組件導出的對象。這裏調用了 Vue.extend(Ctor)。

Vue.extend( options )使用基礎 Vue 構造器，建立一個「子類」。參數是一個包含組件選項的對象。具體參考https://cn.vuejs.org/v2/api/#Vue-extend

extend 定義在 src/core/global-api/extend.js 文件中，咱們分段來分析它的實現原理：

// src/core/global-api/extend.js

Vue.extend = function(extendOptions: Object): Function {
  extendOptions = extendOptions || {};
  const Super = this;
  const SuperId = Super.cid;
  const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
  if (cachedCtors[SuperId]) {
    return cachedCtors[SuperId];
  }

  const name = extendOptions.name || Super.options.name;
  if (process.env.NODE_ENV !== "production" && name) {
    validateComponentName(name);
  }

  // ...
};
複製代碼

extend 函數首先作了一些初始化工做，這裏定義的 cachedCtors 的具體做用在下文會介紹。而後調用 validateComponentName 函數對 extendOptions 的 name 屬性（也就是組件名）進行校驗。validateComponentName 函數代碼以下：

// src/core/util/options.js
export function validateComponentName(name: string) {
  if (
    !new RegExp(`^[a-zA-Z][\\-\\.0-9_${unicodeRegExp.source}]*$`).test(name)
  ) {
    warn(
      'Invalid component name: "' +
        name +
        '". Component names ' +
        "should conform to valid custom element name in html5 specification."
    );
  }
  if (isBuiltInTag(name) || config.isReservedTag(name)) {
    warn(
      "Do not use built-in or reserved HTML elements as component " +
        "id: " +
        name
    );
  }
}
複製代碼

第一個if語句是檢查組件名是否符合 HTML5 自定義元素的命名規範。第二個if語句檢查組件名是否和內置 HTML 元素命名衝突。回到 extend 函數，繼續往下看：

// src/core/global-api/extend.js
Vue.extend = function(extendOptions: Object): Function {
  // ...

  const Sub = function VueComponent(options) {
    this._init(options);
  };
  Sub.prototype = Object.create(Super.prototype);
  Sub.prototype.constructor = Sub;
  Sub.cid = cid++;
  Sub.options = mergeOptions(Super.options, extendOptions);
  Sub["super"] = Super;

  // For props and computed properties, we define the proxy getters on
  // the Vue instances at extension time, on the extended prototype. This
  // avoids Object.defineProperty calls for each instance created.
  if (Sub.options.props) {
    initProps(Sub);
  }
  if (Sub.options.computed) {
    initComputed(Sub);
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend;
  Sub.mixin = Super.mixin;
  Sub.use = Super.use;

  // create asset registers, so extended classes
  // can have their private assets too.
  ASSET_TYPES.forEach(function(type) {
    Sub[type] = Super[type];
  });
};
複製代碼

這一段代碼定義了子類的構造函數 Sub，而後對 Sub 這個對象自己擴展了一些屬性，如擴展 options、添加全局 API 等；而且對配置中的 props 和 computed 作了初始化工做。

繼續看 extend 函數最後一段代碼：

// src/core/global-api/extend.js
Vue.extend = function(extendOptions: Object): Function {
  // ...

  // enable recursive self-lookup
  if (name) {
    Sub.options.components[name] = Sub;
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options;
  Sub.extendOptions = extendOptions;
  Sub.sealedOptions = extend({}, Sub.options);

  // cache constructor
  cachedCtors[SuperId] = Sub;
  return Sub;
};
複製代碼

這裏其實就是將建立好的構造函數 Sub 保存到組件的屬性中做緩存，若是這個組件被其餘組件屢次引用，那麼這個組件會屢次做爲參數傳給 extend 函數，這樣檢查到以前的緩存就能夠直接將 Sub 返回而不用從新構造了。

這樣也就解釋了上面提到的cachedCtors的做用了。

分析完 extend 函數，咱們回到 createComponent 函數，接着往下看：

// src/core/vdom/create-component.js
export function createComponent(
 Ctor: Class<Component> | Function | Object | void,
 data: ?VNodeData,
 context: Component,
 children: ?Array<VNode>,
 tag?: string
): VNode | Array<VNode> | void {
  // ...

  // if at this stage it's not a constructor or an async component factory,
  // reject.
  if (typeof Ctor !== "function") {
    if (process.env.NODE_ENV !== "production") {
      warn(`Invalid Component definition: ${String(Ctor)}`, context);
    }
    return;
  }

  // async component
  let asyncFactory;
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor;
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor);
    if (Ctor === undefined) {
      // return a placeholder node for async component, which is rendered
      // as a comment node but preserves all the raw information for the node.
      // the information will be used for async server-rendering and hydration.
      return createAsyncPlaceholder(asyncFactory, data, context, children, tag);
    }
  }

  data = data || {};

  // resolve constructor options in case global mixins are applied after
  // component constructor creation
  resolveConstructorOptions(Ctor);

  // transform component v-model data into props & events
  if (isDef(data.model)) {
    transformModel(Ctor.options, data);
  }

  // extract props
  const propsData = extractPropsFromVNodeData(data, Ctor, tag);

  // functional component
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children);
  }

  // extract listeners, since these needs to be treated as
  // child component listeners instead of DOM listeners
  const listeners = data.on;
  // replace with listeners with .native modifier
  // so it gets processed during parent component patch.
  data.on = data.nativeOn;

  if (isTrue(Ctor.options.abstract)) {
    // abstract components do not keep anything
    // other than props & listeners & slot

    // work around flow
    const slot = data.slot;
    data = {};
    if (slot) {
      data.slot = slot;
    }
  }

  // ...
}
複製代碼

這裏首先判斷若是Ctor不是函數則拋出警告並結束函數，接下來的一段是與異步組件相關，異步組件相關的我會在後面單獨出一節來分析。

而後對data作初始化處理，並調用 resolveConstructorOptions 解析構造函數 Ctor 的 options。

接下來這一段涉及到了 v-model 指令，和異步組件同樣，也會在後面單獨出一節介紹 v-model 。

後面的代碼和 props、函數式組件、監聽器相關，這裏都先略過。繼續往下：

// src/core/vdom/create-component.js
export function createComponent(
 Ctor: Class<Component> | Function | Object | void,
 data: ?VNodeData,
 context: Component,
 children: ?Array<VNode>,
 tag?: string
): VNode | Array<VNode> | void {
  // ...

  // install component management hooks onto the placeholder node
  installComponentHooks(data);

  // ...
}
複製代碼

這一步是調用 installComponentHooks 函數來安裝組件鉤子函數，來看 installComponentHooks 函數的代碼：

// src/core/vdom/create-component.js
function installComponentHooks(data: VNodeData) {
  const hooks = data.hook || (data.hook = {});
  for (let i = 0; i < hooksToMerge.length; i++) {
    const key = hooksToMerge[i];
    const existing = hooks[key];
    const toMerge = componentVNodeHooks[key];
    if (existing !== toMerge && !(existing && existing._merged)) {
      hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge;
    }
  }
}
複製代碼

這裏的hooksToMerge和componentVNodeHooks是什麼呢？來看下它們的定義：

// src/core/vdom/create-component.js
const componentVNodeHooks = {
  init(vnode: VNodeWithData, hydrating: boolean): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode; // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode);
    } else {
      const child = (vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      ));
      child.$mount(hydrating ? vnode.elm : undefined, hydrating);
    }
  },

  prepatch(oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions;
    const child = (vnode.componentInstance = oldVnode.componentInstance);
    updateChildComponent(
      child,
      options.propsData, // updated props
      options.listeners, // updated listeners
      vnode, // new parent vnode
      options.children // new children
    );
  },

  insert(vnode: MountedComponentVNode) {
    const { context, componentInstance } = vnode;
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true;
      callHook(componentInstance, "mounted");
    }
    if (vnode.data.keepAlive) {
      if (context._isMounted) {
        // vue-router#1212
        // During updates, a kept-alive component's child components may
        // change, so directly walking the tree here may call activated hooks
        // on incorrect children. Instead we push them into a queue which will
        // be processed after the whole patch process ended.
        queueActivatedComponent(componentInstance);
      } else {
        activateChildComponent(componentInstance, true /* direct */);
      }
    }
  },

  destroy(vnode: MountedComponentVNode) {
    const { componentInstance } = vnode;
    if (!componentInstance._isDestroyed) {
      if (!vnode.data.keepAlive) {
        componentInstance.$destroy();
      } else {
        deactivateChildComponent(componentInstance, true /* direct */);
      }
    }
  }
};

const hooksToMerge = Object.keys(componentVNodeHooks);
複製代碼

能夠看到，componentVNodeHooks 定義了四個鉤子函數。

咱們以前提到 Vue.js 使用的 Virtual DOM 參考的是開源庫 snabbdom，它的一個特色是在 VNode 的 patch 流程中對外暴露了各類時機的鉤子函數，方便咱們作一些額外的事情。

整個 installComponentHooks 的過程就是把 componentVNodeHooks 的鉤子函數合併到 data.hook 中，在 VNode 執行 patch 的過程當中執行相關的鉤子函數。

這裏要注意一下合併策略mergeHook，看下代碼：

// src/core/vdom/create-component.js

function mergeHook(f1: any, f2: any): Function {
  const merged = (a, b) => {
    // flow complains about extra args which is why we use any
    f1(a, b);
    f2(a, b);
  };
  merged._merged = true;
  return merged;
}
複製代碼

mergeHook 函數邏輯很簡單，所謂合併就是先執行 componentVNodeHooks 定義的再執行 data.hooks 定義的，再將合併標誌位設爲 true。

createComponent 函數還剩最後一段代碼：

// src/core/vdom/create-component.js

export function createComponent(
 Ctor: Class<Component> | Function | Object | void,
 data: ?VNodeData,
 context: Component,
 children: ?Array<VNode>,
 tag?: string
): VNode | Array<VNode> | void {
  // ...

  // return a placeholder vnode
  const name = Ctor.options.name || tag;
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ""}`,
    data,
    undefined,
    undefined,
    undefined,
    context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  );

  // Weex specific: invoke recycle-list optimized @render function for
  // extracting cell-slot template.
  // https://github.com/Hanks10100/weex-native-directive/tree/master/component
  /* istanbul ignore if */
  if (__WEEX__ && isRecyclableComponent(vnode)) {
    return renderRecyclableComponentTemplate(vnode);
  }

  return vnode;
}
複製代碼