版本:Vue.js v2.6.11
Vue.extend与Vue.component的区别,网上搜了很多资料说的都挺好,但是心里似乎总有那么点恍惚,于是找来Vue的源码,一探它底层的实现原理。
直入主题,Vue.extend代码如下
/**
* Class inheritance
*/
Vue.extend = function (extendOptions) {
extendOptions = extendOptions || {};
var Super = this;
var SuperId = Super.cid;
var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
var name = extendOptions.name || Super.options.name;
if (name) {
validateComponentName(name);
}
var 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$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;
// 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);
// cache constructor
cachedCtors[SuperId] = Sub;
return Sub
};
}
这是一个静态方法,this和Super都是指向Vue本身,大概功能就是创建一个继承于Vue的构造器方法VueComponent并配置相关属性和功能,然后返回。
下面看看Vue.component的源码:
var ASSET_TYPES = [
'component',
'directive',
'filter'
];
function initAssetRegisters (Vue) {
/**
* Create asset registration methods.
*/
ASSET_TYPES.forEach(function (type) {
Vue[type] = function (
id,
definition
) {
if (!definition) {
return this.options[type + 's'][id]
} else {
/* istanbul ignore if */
if (type === 'component') {
validateComponentName(id);
}
if (type === 'component' && isPlainObject(definition)) {
definition.name = definition.name || id;
definition = this.options._base.extend(definition);
}
if (type === 'directive' && typeof definition === 'function') {
definition = { bind: definition, update: definition };
}
this.options[type + 's'][id] = definition;
return definition
}
};
});
}
这仍然是静态方法,this和this.options._base都是指向Vue本身,this.options._base.extend就是Vue.extend;那这个Vue.component做的事就是调用Vue.extend创建Vue子类,并且在最后把这个子类放到Vue.options.components对象属性里面去,这就是全局注册了。
写一些代码测试下:
// Vue.extend扩展子类
var subExtendClass = Vue.extend({
name: 'SubExtendClass',
data: function() {
return {
name: 'php'
};
},
template: "<p>hi {{name}}, I'm dclnet</p>"
});
window.subExtendClass = subExtendClass;
console.log('Vue.extend class: subExtendClass ', subExtendClass);
// -----------------------------------------------
// Vue.component注册组件
var subComponent = Vue.component('SubComponent', {
data: function() {
return {
name: 'java'
};
},
template: "<p>hello {{name}}, I'm dclnet</p>"
});
window.subComponent = subComponent;
console.log('Vue.component class: subComponent ', subComponent);
// ===============================================
// html中使用组件
<div id="dclnet">
<sub-component></sub-component>
<sub-extend-class></sub-extend-class>
</div>
window.app = new Vue({
el: '#dclnet',
// 注意:这里直接放components里面,局部注册 <<<<<
components: {'sub-extend-class': subExtendClass}
});
页面正常显示
看一看其他测试,也可以看看各Vue.options, subExtendClass.options, subComponent.options属性
subExtendClass.options._base == Vue // output: true
subComponent.options._base == Vue // output: true
Vue.options._base == Vue // output: true
typeof subExtendClass // output: function
typeof subComponent // output: function
(new subExtendClass) instanceof Vue // output: true
(new subExtendClass) instanceof subExtendClass // output: true
(new subComponent) instanceof Vue // output: true
(new subComponent) instanceof subComponent // output: true
总结:
Vue.component其实内部是调用Vue.extend创建的子类构造方法,并且创建后放入Vue.options.components里面,以实现全局注册。而Vue.extend仅仅是创建子类构造方法,不放入Vue.options.components。其他细节和应用可看官方文档和网上文章。
以上,基于Vue.js v2.6.11的分析,如有问题欢迎一起讨论。