function install(Vue) {
    // 生成messageBox 構造函數(shù)
    var messageBox = Vue.extend(this);
    messageBox = new messageBox();
    // 掛載組件，生成dom節(jié)點（這里沒傳參，所以只是生成dom并沒有上樹）
    messageBox.$mount();
    // 節(jié)點上樹
    document.body.appendChild(messageBox.$el);
    // 上show方法掛載到全局
    Vue.prototype.$showMessageBox = messageBox.show;
}

// 注：mergeOptions方法是通過不同的策略，將options中的屬性進行合并

Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this // 父級構造函數(shù)
    // 拿到cid，并通過_Ctor屬性緩存，判斷是否已經(jīng)創(chuàng)建過，避免重復渲染同一組件
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    }

    // name校驗+拋出錯誤
    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name)
    }

    // 創(chuàng)建構造函數(shù)Sub
    const Sub = function VueComponent (options) {
      this._init(options)
    }
    // 繼承原型對象
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++ // cid自增
    // 父級options與當前傳入的組件options合并
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
    Sub['super'] = Super // 緩存父級構造函數(shù)

    // 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.
    // 對于props和computed屬性，我們在擴展時在擴展原型的Vue實例上定義代理getter。這避免了object。為創(chuàng)建的每個實例調(diào)用defineProperty。
    if (Sub.options.props) {
      initProps(Sub)
    }
    if (Sub.options.computed) {
      initComputed(Sub)
    }

    // 將全局方法放在Sub上，允許進一步調(diào)用
    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]
    })
    // 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)

    // 對應上邊的_Ctor屬性緩存
    cachedCtors[SuperId] = Sub
    return Sub
  }
}

// 簡化版component源碼
Vue.component = function (id,definition) {
    definition.name = definition.name || id
    // _base指向的是new Vue()時的這個Vue實例，調(diào)用的是Vue實例上的extend方法
    definition = this.options._base.extend(definition)
    this.options.components[id] = definition
    return definition
}

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
  }

  // _base指向的是new Vue()時的這個Vue實例
  const baseCtor = context.$options._base

  // 如果extend沒有執(zhí)行過，在這里執(zhí)行
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor)
  }

  // 報錯處理
  if (typeof Ctor !== 'function') {
    if (process.env.NODE_ENV !== 'production') {
      warn(`Invalid Component definition: ${String(Ctor)}`, context)
    }
    return
  }

  // 異步處理
  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 = data || {}

  
  resolveConstructorOptions(Ctor)
  if (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }
  const propsData = extractPropsFromVNodeData(data, Ctor, tag)
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children)
  }
  const listeners = data.on
  data.on = data.nativeOn
  if (isTrue(Ctor.options.abstract)) {
    const slot = data.slot
    data = {}
    if (slot) {
      data.slot = slot
    }
  }
  
  // 重點 創(chuàng)建init方法
  installComponentHooks(data)

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

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 {
      // 掛載到vnode上，方便取值
      // 在這個函數(shù)中會new并返回extend生成的Ctor
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      )
      // 重點
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  }
  
// createComponentInstanceForVnode函數(shù)示例
export function createComponentInstanceForVnode (
  vnode: any, // we know it's MountedComponentVNode but flow doesn't
  parent: any, // activeInstance in lifecycle state
): Component {
  const options: InternalComponentOptions = {
    _isComponent: true,
    _parentVnode: vnode,
    parent
  }
  // check inline-template render functions
  const inlineTemplate = vnode.data.inlineTemplate
  if (isDef(inlineTemplate)) {
    options.render = inlineTemplate.render
    options.staticRenderFns = inlineTemplate.staticRenderFns
  }
  return new vnode.componentOptions.Ctor(options)
}

if (vm.$options.el) {
    vm.$mount(vm.$options.el);
}

if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
  return
}

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
    let i = vnode.data
    if (isDef(i)) {
      const isReactivated = isDef(vnode.componentInstance) && i.keepAlive

      // 在判斷是否定義的同時，把變量做了改變，最終拿到了i.hook.init（在extend函數(shù)中注冊的Ctor的init方法）
      if (isDef(i = i.hook) && isDef(i = i.init)) {
        // 執(zhí)行init
        i(vnode, false /* hydrating */)
      }
      // after calling the init hook, if the vnode is a child component
      // it should've created a child instance and mounted it. the child
      // component also has set the placeholder vnode's elm.
      // in that case we can just return the element and be done.
      //調(diào)用init hook之后，如果vnode是子組件
      //它應該創(chuàng)建一個子實例并掛載它。孩子
      //組件還設置了占位符vnode的elm。
      //在這種情況下，我們只需返回元素就可以了。

      // componentInstance是組件的ctor實例，有了代表已經(jīng)創(chuàng)建了vnode.elm（真實節(jié)點）
      if (isDef(vnode.componentInstance)) {
        initComponent(vnode, insertedVnodeQueue)
        insert(parentElm, vnode.elm, refElm)
        if (isTrue(isReactivated)) {
          reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
        }
        return true
      }
    }
  }