vlambda博客
学习文章列表

 Vue.component('my-test', { template: '<div>{{test}}</div>', data () { return { test: 1212 } }})var vm = new Vue({ el: '#app', template: '<div id="app"><my-test><my-test/></div>'})

 var myTest = { template: '<div>{{test}}</div>', data () { return { test: 1212 } }}var vm = new Vue({ el: '#app', component: { myTest }})

// 初始化全局apiinitAssetRegisters(Vue);var ASSET_TYPES = [ 'component', 'directive', 'filter'];function initAssetRegisters(Vue){ // 定义ASSET_TYPES中每个属性的方法，其中包括component ASSET_TYPES.forEach(function (type) { // type: component,directive,filter Vue[type] = function (id,definition) { if (!definition) { // 直接返回注册组件的构造函数 return this.options[type + 's'][id] } ... if (type === 'component') { // 验证component组件名字是否合法 validateComponentName(id); } if (type === 'component' && isPlainObject(definition)) { // 组件名称设置 definition.name = definition.name || id; // Vue.extend() 创建子组件，返回子类构造器 definition = this.options._base.extend(definition); } // 为Vue.options 上的component属性添加将子类构造器 this.options[type + 's'][id] = definition; return definition } });}

function validateComponentName(name) { 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.' ); } // 不能使用Vue自身自定义的组件名，如slot, component,不能使用html的保留标签，如 h1, svg等 if (isBuiltInTag(name) || config.isReservedTag(name)) { warn( 'Do not use built-in or reserved HTML elements as component ' + 'id: ' + name ); }}

Vue.component('test', { template: '<span></span>'})var vm = new Vue({ el: '#app', template: '<div><test></test></div>'})

function() { with(this){return _c('div',[_c('test')],1)}}

// 内部执行将render函数转化为Vnode的函数function _createElement(context,tag,data,children,normalizationType) { ··· if (typeof tag === 'string') { // 子节点的标签为普通的html标签，直接创建Vnode if (config.isReservedTag(tag)) { vnode = new VNode( config.parsePlatformTagName(tag), data, children, undefined, undefined, context ); // 子节点标签为注册过的组件标签名，则子组件Vnode的创建过程 } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) { // 创建子组件Vnode vnode = createComponent(Ctor, data, context, children, tag); }}}

// 需要明确组件是否已经被注册 function resolveAsset (options,type,id,warnMissing) { // 标签为字符串 if (typeof id !== 'string') { return } // 这里是 options.component var assets = options[type]; // 这里的分支分别支持大小写，驼峰的命名规范 if (hasOwn(assets, id)) { return assets[id] } var camelizedId = camelize(id); if (hasOwn(assets, camelizedId)) { return assets[camelizedId] } var PascalCaseId = capitalize(camelizedId); if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] } // fallback to prototype chain var res = assets[id] || assets[camelizedId] || assets[PascalCaseId]; if (warnMissing && !res) { warn( 'Failed to resolve ' + type.slice(0, -1) + ': ' + id, options ); } // 最终返回子类的构造器 return res}

// 创建子组件过程 
function createComponent (
 Ctor, // 子类构造器 data, context, // vm实例 children, // 子节点 tag // 子组件占位符) { ··· // Vue.options里的_base属性存储Vue构造器 var baseCtor = context.$options._base;
 // 针对局部组件注册场景 if (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor); } data = data || {}; // 构造器配置合并 resolveConstructorOptions(Ctor); // 挂载组件钩子 installComponentHooks(data);
 // return a placeholder vnode var name = Ctor.options.name || tag; // 创建子组件vnode，名称以 vue-component- 开头 var vnode = new VNode(("vue-component-" + (Ctor.cid) + (name ? ("-" + name) : '')),data, undefined, undefined, undefined, context,{ Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children },asyncFactory);
 return vnode }

// 组件内部自带钩子 var componentVNodeHooks = { init: function init (vnode, hydrating) { }, prepatch: function prepatch (oldVnode, vnode) { }, insert: function insert (vnode) { }, destroy: function destroy (vnode) { } };var hooksToMerge = Object.keys(componentVNodeHooks);// 将componentVNodeHooks 钩子函数合并到组件data.hook中 function installComponentHooks (data) { var hooks = data.hook || (data.hook = {}); for (var i = 0; i < hooksToMerge.length; i++) { var key = hooksToMerge[i]; var existing = hooks[key]; var toMerge = componentVNodeHooks[key]; // 如果钩子函数存在，则执行mergeHook$1方法合并 if (existing !== toMerge && !(existing && existing._merged)) { hooks[key] = existing ? mergeHook$1(toMerge, existing) : toMerge; } } }function mergeHook$1 (f1, f2) { // 返回一个依次执行f1,f2的函数 var merged = function (a, b) { f1(a, b); f2(a, b); }; merged._merged = true; return merged }

function createComponent (...) { ... var baseCtor = context.$options._base;
 // 针对局部组件注册场景 if (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor); }}

// 创建真实domfunction createElm (vnode,insertedVnodeQueue,parentElm,refElm,nested,ownerArray,index) { ··· // 递归创建子组件真实节点,直到完成所有子组件的渲染才进行根节点的真实节点插入 if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) { return } ··· var children = vnode.children; //  createChildren(vnode, children, insertedVnodeQueue); ··· insert(parentElm, vnode.elm, refElm);}function createChildren(vnode, children, insertedVnodeQueue) { for (var i = 0; i < children.length; ++i) { // 遍历子节点，递归调用创建真实dom节点的方法 - createElm createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i); }}

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) { var i = vnode.data; // 是否有钩子函数可以作为判断是否为组件的唯一条件 if (isDef(i = i.hook) && isDef(i = i.init)) { // 执行init钩子函数 i(vnode, false /* hydrating */); } ···}var componentVNodeHooks = { // 忽略keepAlive过程 // 实例化 var child = vnode.componentInstance = createComponentInstanceForVnode(vnode,activeInstance); // 挂载 child.$mount(hydrating ? vnode.elm : undefined, hydrating);}function createComponentInstanceForVnode(vnode, parent) { ··· // 实例化Vue子组件实例 return new vnode.componentOptions.Ctor(options)}

<div id="app">    <component-a></component-a></div>Vue.component('component-a', { template: '<div>a</div>'})var vm = new Vue({ el: '#app'})console.log(vm) // 将实例对象输出

function initLifecycle (vm) { var options = vm.$options; // 子组件注册时，会把父组件的实例挂载到自身选项的parent上 var parent = options.parent; // 如果是子组件，并且该组件不是抽象组件时，将该组件的实例添加到父组件的$parent属性上，如果父组件是抽象组件，则一直往上层寻找，直到该父级组件不是抽象组件，并将，将该组件的实例添加到父组件的$parent属性 if (parent && !options.abstract) { while (parent.$options.abstract && parent.$parent) { parent = parent.$parent; } parent.$children.push(vm); } // 将自身的$parent属性指向父实例。 vm.$parent = parent; vm.$root = parent ? parent.$root : vm;
 vm.$children = []; vm.$refs = {};
 vm._watcher = null; vm._inactive = null; vm._directInactive = false; // 该实例是否挂载 vm._isMounted = false; // 该实例是否被销毁 vm._isDestroyed = false; // 该实例是否正在被销毁 vm._isBeingDestroyed = false;}