这篇文章主要为大家详细介绍了Vue源码解读之Component组件注册的实现,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
Vue可以有全局注册和局部注册两种方式来注册组件。
全局注册有以下两种注册方式:
通过Vue.component 直接注册。
代码如下:
Vue.component('button-counter', {
//data选项必须是一个函数
data: function () {
return {
count: 0
}
},
template:'#clickBtn'
})
通过Vue.extend来注册。
代码如下:
var buttonComponent = Vue.extend({
name:'button-counter',
data: function () {
return {
count: 0
}
},
template:'#clickBtn'
});
Vue.component('button-counter', buttonComponent);
Vue初始化时,initGlobalAPI通过调用initAssetRegisters()进行组件注册。
代码如下:
function initAssetRegisters (Vue) {
// 创建组件注册的方法
// ASSET_TYPES在Vue内部定义,var ASSET_TYPES = ['component','directive','filter'];
ASSET_TYPES.forEach(function (type) {
Vue[type] = function (
id,
definition
) {
//这里的definition指的是定义(Function或Object),是函数或者对象
//如果definition不存在,直接返回options内type和id对应的
//这里的options是指全局的组件,指令和过滤器,见图一
if (!definition) {
return this.options[type + 's'][id]
} else {
/* istanbul ignore if */
if ("development" !== 'production' && type === 'component') {
validateComponentName(id);
}
// 如果是component(组件)方法,并且definition是对象
if (type === 'component' && isPlainObject(definition)) {
definition.name = definition.name || id;
//通过this.options._base.extend方法(也就是Vue.extend方法)将定义对象转化为构造器。
//Vue.options._base = Vue;
definition = this.options._base.extend(definition);
}
if (type === 'directive' && typeof definition === 'function') {
definition = { bind: definition, update: definition };
}
// 将构造器赋值给 this.options[‘component'+ 's'][id]
//全局的组件,指令和过滤器,统一挂在vue.options上。在init的时候利用mergeOptions合并策略侵入实例,供实例使用。
this.options[type + 's'][id] = definition;
return definition
}
};
});
}
图一:
【图片暂缺】
initAssetRegisters里面通过this.options._base.extend方法将定义对象转化为构造器,而options._base.extend其实就是Vue.extend。接下来我们就看一下Vue.extend做了什么。
代码如下:
Vue.extend = function (extendOptions) {
extendOptions = extendOptions || {};
var Super = this;
var SuperId = Super.cid;
//组件缓存
var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
//如果组件已经被缓存在extendOptions上则直接取出
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
//如果有name属性,检验name拼写是否合法
var name = extendOptions.name || Super.options.name;
if ("development" !== 'production' && name) {
validateComponentName(name);
}
var Sub = function VueComponent (options) {
this._init(options);
};
//将vue上原型的方法挂在Sub.prototype中,Sub的实例同时也继承了vue.prototype上的所有属性和方法。
//关于 prototype的学习:http://www.cnblogs.com/dolphinX/p/3286177.html
Sub.prototype = Object.create(Super.prototype);
//Sub构造函数修正,学习于https://www.cnblogs.com/SheilaSun/p/4397918.html
Sub.prototype.constructor = Sub;
Sub.cid = cid++;
//通过vue的合并策略合并添加项到新的构造器上
Sub.options = mergeOptions(
Super.options,
extendOptions
);
//缓存父构造器
Sub['super'] = Super;
// 处理props和computed响应式配置项
if (Sub.options.props) {
initProps$1(Sub);
}
if (Sub.options.computed) {
initComputed$1(Sub);
}
// allow further extension/mixin/plugin usage
Sub.extend = Super.extend;
Sub.mixin = Super.mixin;
Sub.use = Super.use;
//在新的构造器上挂上vue的工具方法
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);
//缓存组件构造器在extendOptions上
cachedCtors[SuperId] = Sub;
return Sub
};
vue.extend返回了一个带有附加Option的vue构造器。这个构造器被命名为Sub,等待render时候初始化。
initAssetRegisters完成之后,options下挂载了全局组件button-counter,如图:
【图片暂缺】
接下来调用new Vue()渲染vue整体的生命周期
如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册。
代码如下:
new Vue({
el: '#components-demo',
components:{
'button-counter':{
template:'#clickBtn',
data: function () {
return {
count: 0
}
}
}
}
})
Vue局部组件注册也是通过initAssetRegisters()方法调用Vue.extend,不同的是在createComponent()时,initMixin()里面有判断
代码如下:
if (options && options._isComponent) {
//因为Vue动态合并策略非常慢,并且内部组件的选项都不需要特殊处理。
//调用initInternalComponent快捷方法,内部组件实例化。
initInternalComponent(vm, options);
}
else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
代码如下:
function initInternalComponent (vm, options) {
var opts = vm.$options = Object.create(vm.constructor.options);
// 这样做是因为它比动态枚举更快。
var parentVnode = options._parentVnode;
opts.parent = options.parent;
opts._parentVnode = parentVnode;
var vnodeComponentOptions = parentVnode.componentOptions;
opts.propsData = vnodeComponentOptions.propsData;
opts._parentListeners = vnodeComponentOptions.listeners;
opts._renderChildren = vnodeComponentOptions.children;
opts._componentTag = vnodeComponentOptions.tag;
if (options.render) {
opts.render = options.render;
opts.staticRenderFns = options.staticRenderFns;
}
}
opts的结构如图所示:
【图片暂缺】
局部注册和全局注册不同的是,只有该类型的组件才可以访问局部注册的子组件,而全局注册是扩展到 Vue.options 下。在所有组件创建的过程中,都会从全局的 Vue.options.components 扩展到当前组件的 vm.$options.components 下,这就是全局注册的组件能被任意使用的原因。
定义组件名的方式有两种:
代码如下:
Vue.component('button-counter', {})
引用这个自定义元素时,必须用 <button-counter></button-counter>
使用驼峰的形式
代码如下:
Vue.component('buttonCounter', { })
此时在引用这个自定义元素时,两种命名方法都可以使用。也就是说,<buttonCounter>
和 <button-counter>
都是可行的。
注意,直接在 DOM (即非字符串的模板) 中使用时只有短横线是有效的。如下:
代码如下:
<div id="components-demo">
<button-counter></button-counter>
</div>
可参考:https://www.q1010.com/article/144050.htm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/5771-0.html
注:关于Vue源码解读之Component组件注册的实现的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。