【Vue2.x 源码学习】第三十九篇 - 组件部分 - 创建组件虚拟节点

<div id="app">
    <my-button></my-button>
</div>

// 参数：_c('标签', {属性}, ...儿子)export function createElement(vm, tag, data={}, ...children) {  // 返回元素的虚拟节点（元素是没有文本的）  return vnode(vm, tag, data, children, data.key, undefined);}

export function createElement(vm, tag, data={}, ...children) {
  // 添加 tag 为组件时的处理，创建出组件的虚拟节点 componentVnode  // todo ...  console.log(tag);  return vnode(vm, tag, data, children, data.key, undefined);}

// 添加 tag 为组件时的处理逻辑，创建出组件的虚拟节点export function createElement(vm, tag, data={}, ...children) {  // 判断是组件还是元素节点：是否属于普通标签  if (!isReservedTag(tag)) {// 组件：非普通标签即为组件    // todo...  }    // 创建元素的虚拟节点  return createComponent(vm, tag, data, children, data.key, Ctor);// 创造组件的虚拟节点}
/** * 创造组件的虚拟节点 componentVnode */function createComponent(vm, tag, data, children, key, Ctor) {    // todo...}
// 判定包含关系function makeMap(str) {  let tagList = str.split(',');  return function (tagName) {    return tagList.includes(tagName);  }}
// 原始标签export const isReservedTag = makeMap(  'template,script,style,element,content,slot,link,meta,svg,view,button,' +  'a,div,img,image,text,span,input,switch,textarea,spinner,select,' +  'slider,slider-neighbor,indicator,canvas,' +  'list,cell,header,loading,loading-indicator,refresh,scrollable,scroller,' +  'video,web,embed,tabbar,tabheader,datepicker,timepicker,marquee,countdown')

// 添加 tag 为组件时的处理逻辑，创建出组件的虚拟节点export function createElement(vm, tag, data={}, ...children) {  if (!isReservedTag(tag)) {// 组件    // 获取组件的构造函数:之前已经保存到了全局 vm.$options.components 上；    let Ctor = vm.$options.components[tag];    // 创建组件的虚拟节点    return createComponent(vm, tag, data, children, data.key, Ctor);  }    // 创建元素的虚拟节点  return vnode(vm, tag, data, children, data.key, Ctor);}
/** * 创造组件的虚拟节点 componentVnode */function createComponent(vm, tag, data, children, key, Ctor) {    let componentVnode;    // todo...    return componentVnode;}

/** * 创造组件的虚拟节点 componentVnode */function createComponent(vm, tag, data, children, key, Ctor) {  if(isObject(Ctor)){    //  todo：获取 Vue.extend,并将对象处理成为组件的构造函数  }    // 创建 vnode 时,组件是没有文本的,需要传入 undefined  let componentVnode = vnode(vm, tag, data, children, key, undefined, Ctor);  return componentVnode;}
// options：可能是组件的构造函数，也可能是对象function vnode(vm, tag, data, children, key, text, options) {  return {    vm,       // 谁的实例    tag,      // 标签    data,     // 数据    children, // 儿子    key,      // 标识    text,     // 文本    componentOptions: options  // 组件的选项，包含 Ctor 及其他扩展项  }}

// src/global-api/index.js
export function initGlobalAPI(Vue) {  Vue.options = {};  // 当组件初始化时，会使用 Vue.options 和组件 options 进行合并;  // 在这个过程中，_base 也会被合并到组件的 options 上;  // 之后所有的 vm.$options 就都可以取到 _base 即 Vue;  // 这样,在任何地方访问 vm.$options._base 都可以拿到 Vue;  Vue.options._base = Vue;  Vue.options.components = {};  Vue.extend = function (opt) { }  Vue.component = function (id, definition) { }}

  Vue.prototype._init = function (options) {    const vm = this;    // 使用 Vue 的 options 和组件自己的options进行合并    vm.$options = mergeOptions(vm.constructor.options, options);    initState(vm);    if (vm.$options.el) {      vm.$mount(vm.$options.el)    }  }

/** * 创造组件的虚拟节点 componentVnode */function createComponent(vm, tag, data, children, key, Ctor) {
  if(isObject(Ctor)){    // 获取 Vue 并通过 Vue.extend 将对象处理成为组件的构造函数    Ctor = vm.$options._base.extend(Ctor)  }
  // 创建vnode时,组件是没有文本的,需要传入 undefined  let componentVnode = vnode(vm, tag, data, children, key, undefined, Ctor);  return componentVnode;}

function createComponent(vm, tag, data, children, key, Ctor) {  if(isObject(Ctor)){    Ctor = vm.$options._base.extend(Ctor)  }  // 注意：组件没有孩子，组件的孩子就是插槽,将 children 放到组件的选项中  let componentVnode = vnode(vm, tag, data, undefined, key, undefined, {Ctor, children, tag});  return componentVnode;}

备注：组件虚拟节点的唯一标识应为：vue-component-cid-name- cid：组件实例的唯一标识；- name：组件定义中的 name 属性；