Vue.extend官方源码:
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
};
}
Vue.extend实现了缓存策略
/**
* Each instance constructor, including Vue, has a unique
* cid. This enables us to create wrapped "child
* constructors" for prototypal inheritance and cache them.
*/
Vue.cid = 0;
var cid = 1;
以上的注解说明了，每一个构造函数包括Vue都有独一无二的cid，这能够让我们在创建子类的同时缓存它们。所以反复调用Vue.extend应该返回同一个结果。
var SuperId = Super.cid;
var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
以上的代码，缓存cachedCtors是通过作为参数传入的包含组件选项的对象的属性获取，假若需通过Vue.extend创建的子类存在于缓存中，则直接返回。cachedCtor以父类(即Vue)的cid作为key来查询。
// cache constructor
cachedCtors[SuperId] = Sub;
return Sub
以上的代码，Sub是创建好的子类，在返回之前，将它们放入缓存。
子类的创建过程
Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.cid = cid++;
以上的代码，将父类的原型继承到子类；将子类原型的构造属性指向子类的构造函数，子类的标识自增，标识唯一。
Sub.options = mergeOptions(
Super.options,
extendOptions
);
Sub['super'] = Super;
以上的代码，将父类的options选项继承到子类。并将子类的super属性指向父类Vue。
<body>
<div id="app"></div>
<script>
const obj=Vue.extend({
data() {
return {
title:'123'
}
},
})
console.log(obj.super)
</script>
</body>
if (Sub.options.props) {
initProps$1(Sub);
}
function initProps$1 (Comp) {
var props = Comp.options.props;
for (var key in props) {
proxy(Comp.prototype, "_props", key);
}
}
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
};
function proxy (target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
};
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val;
};
Object.defineProperty(target, key, sharedPropertyDefinition);
}
以上的代码，如果子类选项中存在props属性，则对其进行初始化。假若通过子类的实例访问vm.a，那么实际上访问到的是Sub.prototype._props.name。为sharedPropertyDefinition的存取器设置的函数中的this指向并不是很清楚，自己实现了一个类似的，它的指向是undefined。有清楚的大佬可以留言。
if (Sub.options.computed) {
initComputed$1(Sub);
}
function initComputed$1 (Comp) {
var computed = Comp.options.computed;
for (var key in computed) {
defineComputed(Comp.prototype, key, computed[key]);
}
}
function defineComputed (
target,
key,
userDef
) {
var shouldCache = !isServerRendering();
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef);
sharedPropertyDefinition.set = noop;
} else {
sharedPropertyDefinition.get = userDef.get
? shouldCache && userDef.cache !== false
? createComputedGetter(key)
: createGetterInvoker(userDef.get)
: noop;
sharedPropertyDefinition.set = userDef.set || noop;
}
if (sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
("Computed property \"" + key + "\" was assigned to but it has no setter."),
this
);
};
}
Object.defineProperty(target, key, sharedPropertyDefinition);
}
以上的代码，如果子类选项中存在computed属性，则对其进行初始化。
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);
以上的代码就是将父类的属性复制到子类，并在自身新增了superOptions、extendOptions和sealedOptions。
3663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
